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 code

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");
});

可能出现问题，因为尚未加载Chosen下拉字段。上面的代码解决了这个问题。

同时检查您的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 } ?>

支持在更改事件上无法正常工作

1 个答案: