檢測輸入文本何時更改

Question

我正在嘗試設置輸入和ul-li的風格，如select-option（如下所示）。 如果單擊li，則可以成功更改輸入文本的值。 例如，如果我單擊第一個li，則#main值為1；第二個li，單擊#main值為2。

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

現在，我正在嘗試檢測#main輸入onchange的值，以便可以將＃sub-list的內容相應地更改為#main的值。

<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/