Question

下面是我的代码。我可以让各个部分单独工作，但无法找出为什么它不能整体工作。您可以在http://www.center-center.com/frames-stretcher%20app.php查看其实例。我希望每次更改表单元素时，表单都会更新页面底部的表格。更改所选的单选按钮和文本输入时页面正常运行，但由于我不知道的原因使用下拉菜单时不会动态更新。具有选择元素的值被传递，但由于某种原因不像其他输入那样动态更新。我已经单独测试了它们并且工作正常，但是当它全部在一起时它是不行的。任何帮助都会非常感激，因为我一直试图让这个过去几天正常工作。

    $(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>

Answer 1

您的下拉菜单是动态添加的，您必须像这样委托事件：

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

     // do something    

});

如果不使用，你还需要使用最新版本的jQuery。

Jquery选择更改不更新

1 个答案: