Prop在修改事件上無法正常工作

Question

我有一些代碼，當用戶從下拉菜單中選擇一個項目時，這會觸發一個更改事件，然後調用一個php頁面進行處理。當頁面第一次加載時，我選擇一個項目，當觸發更改事件時，這應該改變所選擇的輸入的佔位符並禁用相同的輸入：'#box_ffrtv'。

但是，發生的情況是更改只發生在我在下拉菜單中進行第二次選擇後，然後更改佔位符並禁用輸入。我對jquery還是比較陌生的，希望得到一些幫助，告訴我哪裏出錯了。非常感謝。

的jQuery 1.7.2：

jQuery的選擇：http://harvesthq.github.io/chosen/

jQuery代碼

$(function() { 
     $("#frtv_dept").change(function() { 
      $(this).after('<div id="loader"><imgages src="img/loading.gif" alt="loading files" /></div>'); 
      $.get('loadFrtvsubcat.php?frtv_dept=' + $(this).val(), function(data) { 
       $("#box_frtv").html(data); 
       $('#loader').slideUp(200, function() { 
       $(this).remove(); 
       $("#box_frtv").trigger("chosen:updated"); 
      }); 

     }); 
    }); 
}); 

PHP代碼

if (mysql_num_rows($result) > 0) { 

    echo "<script type=text/javascript>\n"; 
    echo "$(function() {\n"; 
    echo "$(\".noRtvBoxes\").html('')\n"; 
    echo "$('#box_frtv').attr('data-placeholder', \"Choose your boxes...\")\n"; 
    echo "$(\"#box_frtv\").prop('disabled', false)\n"; 
    echo "});\n"; 
    echo "</script>\n"; 

    while($row = mysql_fetch_array($result)) { 
    echo "<option value='$row[boxref]'>$row[boxref]</option>"; 
    }  

    } else { 


    echo "<script type=text/javascript>\n"; 
    echo "$(function() {\n"; 
    echo "$('.noRtvBoxes').html('ERROR: There are no boxes in that dept. Please select another.').css({\"color\":\"red\", \"margin\": \"-6px 0 10px 22px\", \"font-size\": \"12px\", \"font-family\": \"Verdana, Geneva, sans-serif\"})\n"; 
    echo "$('#box_frtv').attr('data-placeholder', \"No boxes to display...\").prop('disabled', true)\n"; 
    echo "$('#box_ffrtv_chosen').find('option:selected').remove()\n"; 
    echo "$('#box_ffrtv').html('')\n"; 
    echo "$('#box_ffrtv').trigger(\"chosen:updated\")\n"; 
    echo "$('#box_ffrtv').attr('data-placeholder', \"No files to display...\")\n"; 
    echo "$('#box_ffrtv').prop('disabled',true)\n"; 
    echo "$('.noRtvFiles').html('ERROR: There are no files in that box. Please select another.').css({\"color\":\"red\", \"margin\": \"-6px 0 10px 22px\", \"font-size\": \"12px\", \"font-family\": \"Verdana, Geneva, sans-serif\"})\n"; 
    echo "</script>\n"; 

    } 

HTML代碼

<select data-placeholder="Choose your file(s)..." class="chosen-select" name="box_ffrtv[]" id="box_ffrtv" multiple required="required"> 
    <option value=""></option> 
</select> 

Answer 1

如果要更新下拉場，你應該使用的代碼：

$('#box_ffrtv').on('chosen:ready', function(evt, params){ 
    // If the Chosen dropdown is loaded properly 
    // Do whatever you want 

    // Refresh the state of the Chosen dropdown 
    $('#box_ffrtv').trigger("chosen:updated"); 
}); 

可能發生的問題，因爲已選擇下拉字段尚未加載。上面的代碼解決了這個問題。

另請檢查您的jQuery版本：如果您使用的jQuery版本低於1.6，則不能使用prop。檢查此：Disable/enable an input with jQuery?

此外，您的JS代碼中有一個錯誤：$(function(){應該使用});正確關閉。

我不知道如何在控制檯中沒有任何錯誤。 在我看來，你應該停止使用echo來編寫你的JS代碼。您可以使用?> ... write your HTML code <?php。你的代碼會更乾淨，你將擺脫所有你添加的轉義字符。

編輯：

我定你的代碼。您遇到與<script type="text/javascript">有關的問題。您應該在引號之間寫入類型的值。

<?php if(mysql_num_rows($result) > 0){ ?> 
    <script type="text/javascript"> 
     $(function(){ 
      $('#box_ffrtv').on('chosen:ready', function(evt, params){ 
       $(".noRtvBoxes").html(""); 
       $("#box_frtv").attr("data-placeholder", "Choose your boxes..."); 
       $("#box_frtv").prop("disabled", false); 
      }); 
     }); 
    </script> 
<?php 
    while($row = mysql_fetch_array($result)){ 
     echo '<option value="' . $row[boxref] . '">' . $row[boxref] . '</option>'; 
    } 
} else { 
?> 
    <script type="text/javascript"> 
     $(function(){ 
      $('#box_ffrtv').on('chosen:ready', function(evt, params){ 
       $(".noRtvBoxes").html("ERROR: There are no boxes in that dept. Please select another.").css({"color":"red", "margin": "-6px 0 10px 22px", "font-size": "12px", "font-family": "Verdana, Geneva, sans-serif"}); 
       $("#box_frtv").attr("data-placeholder", "No boxes to display...").prop('disabled', true); 
       $("#box_ffrtv_chosen").find("option:selected").remove(); 
       $("#box_ffrtv").html(""); 
       $("#box_ffrtv").trigger("chosen:updated"); 
       $("#box_ffrtv").attr("data-placeholder", "No files to display..."); 
       $("#box_ffrtv").prop("disabled",true); 
       $(".noRtvFiles").html("ERROR: There are no files in that box. Please select another.").css({"color":"red", "margin": "-6px 0 10px 22px", "font-size": "12px", "font-family": "Verdana, Geneva, sans-serif"}); 
      }); 
     }); 
    </script> 
<?php } ?>