变更事件时道具无法正常工作 - javascript

我有一些代码，当用户从下拉列表中选择一个项目时，这会触发一个change事件，然后调用php页面进行处理。首次加载页面时，我选择一个项目，并在触发change事件时，这应更改所选select输入的占位符并禁用相同的输入：“＃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>

参考方案

如果要更新下拉字段，则应使用以下代码：

$('#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 } ?>

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做？。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

将简单的javascript代码转换为c＃ - javascript

昨天我在这里问了一个问题。使用javascript和html解决方案很简单前一阵子我打算什么是操纵html来执行javascript中的任务但是我改变了主意，将javascript代码重写为c＃这是输入<Abstract> <Heading>Abstract</Heading> <Para TextBreak=�…

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量：我的问题是在javascript代码中使用for循环，for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码： {% block extra_javascript %} <script src="/static/js…

JavaScript处理期间数组内部的数组 - javascript

我正在尝试使用Ajax处理表单，并且在处理复选框时遇到了问题。我以为我可以在数组中做一个数组，将选中的框添加到数据对象中，但这似乎不起作用。它不会显示为控制台中对象的一部分或类似内容。我尝试了一些变化，但没有任何效果。这是当前的样子：var formData = { 'fname' : $('input[name=fname]&…

如果复选框切换复选框已选中，则在切换div中输入必填字段 - javascript

我使用脚本用JavaScript切换了一些div。如果要选中复选框以显示toogle div，我想在toogle div中设置一些“必填”输入字段。有人能弄清楚吗？那是工作吗？function show(id) { if(document.getElementById) { var mydiv = document.getElementById(id); m…