selectmenuchange not working

Question

我有2個下拉選擇字段以及一些文本字段。其中一個下拉選項最初是一個文本輸入只讀，其中一些文本來自服務器。

當單擊按鈕編輯時，該文本字段將根據來自服務器的值（僅可能有2個值）更改爲下拉列表。

因此，當前在下拉列表中選擇的值是來自服務器的值，其他值是第二種可能的選項。

根據該選擇，應該啓用第二個選擇字段。爲了實現這一點，我正在使用selectmenuchange。

但是，它不適用於我的情況。讓我用代碼解釋更多。

HTML

<div id="protocolParIcons"> 
    <a href="#!" class="sbtooltip" title="Apply"><button id="applyButton" class="ui-icon ui-icon-circle-check"></button></a> 
    <a href="#!" class="sbtooltip" title="Cancel"><button id="cancelButton" class="ui-icon ui-icon-cancel"></button></a> 
    <a href="#!" class="sbtooltip" title="Edit"><button id="editFields" class="ui-icon ui-icon-pencil"></button></a> 
</div> 

<td valign="top"> 
     <label for="cfgMethod_0">Configuration Method</label> 
     <input type="text" class="ipv4editable" name="cfgMethod_0" id="cfgMethod_0" readonly> 
    </td> 
    <td valign="top"> 
     <label for="ipVersion_0">IP Version</label> 
     <select id="ipVersion_0"> 
      <option>IPv4</option> 
      <option>IPv6</option> 
     </select> 
    </td> 

JS

$("#ipVersion_0").selectmenu({ 
     width:250, 
     disabled:true 
    }); 

    /*initialize buttons*/ 
    $("#editFields").button({ 
     disabled:false 
    }); 

    /*disabling cancel and apply buttons by default*/ 
    $("#cancelButton").button({ 
     disabled:true 
    }); 
    $("#applyButton").button({ 
     disabled:true 
    }); 

$(document).on("click","#editFields",function(){ 

      $("#editFields").button("option","disabled",true); 
      $("#applyButton").button("option","disabled",false); 
      $("#cancelButton").button("option","disabled",false); 

       var connMode = $("#cfgMethod_0").val(); 

       if (connMode === 'DHCP') { 
        $("#cfgMethod_0").replaceWith("<select class='ipv4editable' id='cfgMethod_0' name='cfgMethod_0'> <option selected>DHCP</option> <option>static</option></select>"); 
       } else { 
        $("#cfgMethod_0").replaceWith("<select class='ipv4editable' id='cfgMethod_0' name='cfgMethod_0'> <option>DHCP</option> <option selected>static</option></select>"); 
        $("#ipVersion_0").selectmenu("option","disabled",false); 

       } 

       $("#cfgMethod_0").selectmenu({ 
        width: 250, 
        disabled: false 
       });  

    $(document).on("click","#cancelButton",function(){ 
      $("input[type=text]").prop("disabled",true).css("border-color",""); 
      $("#ipVersion_0").selectmenu("option","disabled",true); 
      $("#editFields").button("enable"); 
      $("#applyButton").button("disable"); 
      $("#cancelButton").button("disable"); 
      $("#cfgMethod_0").replaceWith("<input type='text' id='cfgMethod_0' name='cfgMethod_0' class='ipv4editable' readonly>"); 
      }   

    }); 

    $(document).on("click","#applyButton",function(){ 
      $("input[type=text]").prop("disabled",true).css("border-color",""); 
      $("#ipVersion_0").selectmenu("option","disabled",true); 
      $("#editFields").button("enable"); 
      $("#applyButton").button("disable"); 
      $("#cancelButton").button("disable"); 

      $("#cfgMethod_0").replaceWith("<input type='text' name='cfgMethod_0' class='ipv4editable' id='cfgMethod_0' readonly>"); 
    }); 

    /*this is the part that should have done the expected */ 
    $("#cfgMethod_0").on("selectmenuchange",function(){ 
     if($("#cfgMethod_0 :selected").text() === "static") { 
      console.log("*********************"+$("#cfgMethod_0 :selected").text()); 
      $("#ipVersion_0").selectmenu("option","disabled",false); 

      $('.ipv4editable').prop("readonly",false); 
      $('.ipv4editable').css("border-color","red"); 
      $('.ipv4editable').prop("disabled",false); 
     } 
     else{ 
      console.log("else *********************"+$("#cfgMethod_0 :selected").val()); 
      $("#ipVersion_0").selectmenu("option","disabled",true); 

      /*disable ipv4 section */ 
      $('.ipv4editable').prop("readonly",true); 
      $('.ipv4editable').css("border-color",""); 
      $('.ipv4editable').prop("disabled",true); 

      /*disable ipv4 section */ 
      $('.ipv4editable').prop("readonly",true); 
      $('.ipv4editable').css("border-color",""); 
      $('.ipv4editable').prop("disabled",true); 
     } 
    }).trigger('selectmenuchange'); 

在控制檯中，不知何故，我得到的價值爲未定義當我嘗試打印選擇選項cfgMethod_0 id，這將是中selectmenu代碼。

我覺得用代替聲明它不能知道輸入文本後來變成了選擇菜單。

我已經嘗試在幾個地方放置selectmenuchange代碼，但它似乎不工作。

Answer 1

真的想了很多之後，我試圖做我剛纔做的其他按鈕事件。我用： -

$(document).on("selectmenuchange","#cfgMethod_0",function(){ 
     /*all the same code*/ 
    }).trigger('selectmenuchange'); 

完蛋了。否則，它會失去跟蹤第一個輸入文本的id，然後改變爲選擇，反之亦然。