javascript - 检测输入文本何时更改

Question

我正在尝试设置输入和 ul-li 之类的选择选项的样式(如下所示)。如果单击 li，我将成功更改输入文本的值。例如，如果我点击第一个 li，#main 值将为 1，或者在第二个 li 上为 2。

<div>
    <input id="main" type="text" disabled placeholder="Select...">
    <ul id="main-list>
        <li>1</li>       
        <li>2</li>
    </ul>
 </div>

现在，我正在尝试检测#main input onchange 的值，以便我可以根据#main 的值更改#sub-list 的内容。

<script>
 var mymap = {"1": ["a1", "b1", "c1"]
             ,"2": ["a2", "b2", "c2"]
            };
</script>
 <div>
    <input id="sub" type="text" disabled placeholder="Select...">
    <ul id="sub-list">
        <li>1</li>
        <li>2</li>
    </ul>
 </div>
 <script>
 $("#main).bind("change", function() {
     // Reset the #sub-list
     alert($(this).val());
 });
</script>

我遇到的问题是即使#main 值已更改，我也无法检测到#main onchange 的值来重置#sub-list 的内容。谁能帮忙解释一下问题是什么？

Answer 1

在onlick中添加你的逻辑

    $("#main-list li").bind("click", function() {
    $("#main").val($(this).html());
    $("#main").css('background-color','#FC0');
    $(this).parent().append('value changed');

});

http://jsfiddle.net/dshun/ud4r1p84/