0

下面是我的代码。我可以让这些部分单独工作，但无法找出为什么它不能作为一个整体工作。你可以在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>
4

1 回答 1

4

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

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

     // do something    

});

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

于 2013-01-21T02:43:20.790 回答