jQuery UI Dropdown值不會改變

Question

我有一個包含3個選項的下拉菜單。該菜單顯示在模式jQuery UI對話框中。

我可以打開對話框並選擇三個選項之一。所選的選項存儲在一個變量中。這工作正常。但是，如果我再次打開對話框並選擇另一個選項，該變量不會更改 - 它包含第一個選擇的值。

$("#button").click(function() 
{ 
    var diag = "<select id='diagDropdown'>" 
      +"<option>Option 1</option>" 
      +"<option>Option 2</option>" 
      +"<option>Option 3</option>" 
       +"</select>"; 

    $(diag).dialog(
     {title: "Choose Option"}, 
     {autoOpen: "false"}, 
     {modal: "true"}, 
     {draggable: "false"}, 
     { buttons: {OK: dialogOK} });  

    function dialogOK() 
    { 
     var chosenOption=$("#diagDropdown option:selected").val().toLowerCase(); 

     //working with chosen option 
     $(this).dialog("close");                 
    }); 

希望你能幫助我。提前致謝！

Answer 1

的問題是，每次點擊的元素ID爲「按鈕」，你正在創建一個ID的新下拉「diagDropdown」在一個新的對話框。

那麼你的代碼：

var chosenOption=$("#diagDropdown option:selected").val().toLowerCase(); 

總是與ID在DOM 「diagDropdown」 選擇第一個下拉列表。

試試這個：

<input type="button" value="click me" id="button"/> 

<script type="text/javascript"> 
    // On DOM ready 
    $(function() { 

     var dropdown = 
      $('<select id="diagDropdown"> ' + 
       '<option>Option 1</option>' + 
       '<option>Option 2</option>' + 
       '<option>Option 3</option>' + 
      '</select>'); 

     // Create the dialog (only once) 
     dropdown.dialog({ 
      title: "Choose Option", 
      autoOpen: false, 
      modal: true, 
      draggable: false, 
      buttons: { 
       "OK": function() { 
        var chosenOption=$('#diagDropdown option:selected').val().toLowerCase(); 
        //working with chosen option 
        $(this).dialog('close'); 
       } 
      } 
     }); 

     // Bind click event : on click just open the existing dialog 
      $('#button').click(function() { 
       $('#diagDropdown').dialog('open'); 
      }); 
    }); 
</script>