Question

当我的一个var改变时，我想改变我的选择选项我从这开始。 JS：

test = new Array();

HTML：

<select>
</select>

当我在测试中添加元素时，我会搜索更改我的选择：
JS：

test.push({value:1,innerHTML:opt1})
test.push({value:2,innerHTML:opt2})

HTML：

<select>
<option value=1>opt1</option>
<option value=2>opt2</option>
</select>

我可以使用eventlistener或其他任何东西吗？

Answer 1

有两种方法可以做到这一点：

a）不要让变量成为一个简单的变量，而是一个具有setter函数的对象，它也可以执行你想要的DOM更改。

function Test() {
    var self = this;
    self.value = [];
    self.set = function(new_obj){
        self.value.push(new_obj);
        // DOM changes here
    }
    return self; 
}

var test = new Test();

然后，当您想要更改变量时，请写：

test.set({value:1,innerHTML:opt1})

b）使用像knockout.js这样的mvc框架（存在以解决这个问题）

Answer 2

您可以使用代理推送方法向其添加自己的逻辑：

var test = new Array();
var _push = test.push;

test.push = function(el) {
    // add options to select here
    _push.call(this, el);
};

Answer 3

Try something like this... var tt =['sdfs','sdgfg']; Object.observe(tt, function(){ debugger; }); tt.push('sdfds');

Answer 4

HTML:

<select id="select1" onchange="changeHandler(this)">
    <option value="1" >1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

JS:

document.getElementById('select1').value = 2;
function changeHandler(select){
    alert(select.value);
}

https://jsfiddle.net/NourSammour/hp9ryekp/1/

and to watch your array and trigger the re-render you can use

Array.observe(test, function(changes) {
  // render
});

I hope this help :)

Reference:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/observe

使用var change更改选择选项

4 个答案: