以下は私のコードです。ピースを個別に正しく機能させることはできますが、全体として機能しない理由を特定することはできません。http://www.center-center.com/frames-stretcher%20app.phpでその実例を見ることができます。フォーム要素が変更されるたびに、ページの下部にあるテーブルをフォームで更新したいと思います。選択したラジオボタンとテキスト入力を変更するとページは正しく機能しますが、私が知らない理由でドロップダウンメニューを使用するとその場で更新されません。select要素の値は伝達されますが、何らかの理由で他の入力のようにその場で更新されません。私はそれらを個別にテストしました、そしてそれはうまくいきます、しかしそれがすべて一緒になったらそれはダメです。私は過去数日間これを適切に機能させるように努めてきたので、どんな助けでも大歓迎です。
$(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"> </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>