jquery select change not updating

下面是我的代碼。我可以讓這些作品單獨運作，但無法挑出它爲什麼不能作爲一個整體工作。你可以在http://www.center-center.com/frames-stretcher%20app.php上看到它的一個實例。我希望表單在每次更改表單元素時更新頁面底部的表格。當更改所選單選按鈕和文本輸入時，該頁面可以正常工作，但由於我不瞭解的原因，在使用下拉菜單時不會即時更新。與選擇元素的值被傳送，但由於某些原因，不會像其他輸入那樣隨時更新。我已經對它們進行了單獨測試，並且它工作正常，但是當它們在一起時，它是不可行的。任何幫助將不勝感激，因爲我一直試圖讓這個在過去幾天正常工作。jquery select change not updating

$(document).ready(function(){ 
     var type = null; 

     $("#stretcher-op").change(function() { 
      $("#stock-select div").hide(); 

      if (type != $('input[name=type]:checked').val()) { 
       if (type == 'frame') { 
        $("select#stock-op").remove(); 
        $("select#corner-op").remove(); 
        $("select#finish-op").remove(); 

        $("label[for=finish-op]").hide(); 
       } 

       $("label[for=stock-op]").after('<select id="stock-op" name="stock"><option selected="selected"></option><?php $i = 0; foreach($stretcher_stock_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>'); 
       $("label[for=corner-op]").after('<select id="corner-op" name="corner"><option selected="selected"></option><?php $i = 0; foreach($stretcher_corner_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>'); 
      } 

      type = $('input[name=type]:checked').val(); //stretcher 
     }); 

     $("#frame-op").change(function() { 
      $("#stock-select div").hide(); 

      if (type != $('input[name=type]:checked').val()) { 
       if (type == 'stretcher') { 
        $("select#stock-op").remove(); 
        $("select#corner-op").remove(); 
       } 

       $("label[for=finish-op]").show();    

       $("label[for=stock-op]").after('<select id="stock-op" name="stock"><option selected="selected"></option><?php $i = 0; foreach($framing_stock_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>'); 
       $("label[for=corner-op]").after('<select id="corner-op" name="corner"><option selected="selected"></option><?php $i = 0; foreach($framing_corner_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>'); 
       $("label[for=finish-op]").after('<select id="finish-op" name="finish"><option selected="selected"></option><?php $i = 0; foreach($framing_finish_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>'); 
      } 

      type = $('input[name=type]:checked').val(); //frame 
     }); 

     $("input,select").change(function() { 
      width = $('#width').val(); 
      height = $('#height').val(); 
      quantity = $('#quantity-op').val(); 
      stock = $('#stock-op option:selected').val(); 
      corner = $('#corner-op option:selected').val(); 
      finish = $('#finish-op option:selected').val(); 

      $("#quote").load('art-product-calculator.php?type=' + type + '&width=' + width +'&height=' + height + '&quantity=' + quantity + '&stock=' + stock + '&corner=' + corner + '&finish=' + finish); 
     }); 
    }); 
</script> 
</head> 

<body> 
<div id="container"> 
    <header id="banner"> 
     <img src="" /> 
    </header> 

    <section id="selection"> 
     <div class="option" id="stretcher"> 
      <label for="stretcher-op">Stretcher</label><br /> 
      <input id="stretcher-op" name="type" type="radio" value="stretcher" /> 
     </div> 
     <div class="option" id="frame"> 
      <label for="frame-op">Frame</label><br /> 
      <input id="frame-op" name="type" type="radio" value="frame" /> 
     </div> 

     <div class="option" id="quantity"> 
      <label for="quantity-op">Quantity </label><input id="quantity-op" name="width" type="" value="" size="6" /> 
     </div> 

     <div class="option" id="dimensions"> 
      <input id="width" name="width" type="" value="width" size="6" /> <label for="width">inches</label> by 
      <input id="height" name="height" type="" value="height" size="6" /> <label for="height">inches</label> 
     </div> 

     <div class="option" id="stock-select"> 
      <label for="stock-op">Stock Selection </label><div class="space-holder">&nbsp;</div> 
     </div> 

     <div class="option" id="corner-joint"> 
      <label for="corner-op">Corner Joint </label> 
     </div> 

     <div class="option" id="finish"> 
      <label for="finish-op">Finishing </label> 
     </div> 
    </section> 

    <section id="quote"> 
    </section> 
</div> 
</body> 
</html>

來源

2013-01-21 Tyler Robots

你的下拉菜單的動態添加，你必須對他們委託的事件是這樣的：

$(document).on("change", "#mydrop, #lastdrop, #newdrop", function() { 

    // do something  

});

，你也需要在不使用使用最新版本的jQuery。

來源

2013-01-21 02:43:20

假設OP使用jQuery 1.7或更高版本......如果沒有，OP可以在事件處理程序插入到DOM後附加事件處理程序。 – daniel0mullins

@ daniel0mullins我認爲OP需要一些建議才能使用最新版本。 –

美麗，謝謝一堆。 –

jquery select change not updating

回答

相關問題