根据选择框显示/隐藏div

时间:2013-09-29 02:48:55

标签: jquery html

这里有很多关于此的答案,我试图修改它们以适应但它不起作用。

我为它制作了一个jsfiddle:http://jsfiddle.net/DrPz4/

选择框代码:

<div class="options">
    <h2>Available Options</h2>
    <br />
    <div id="option-230" class="option">
        <span class="required">*</span>
        <b>Size:</b><br />
        <select name="option[230]">
            <option value=""> --- Please Select --- </option>
            <option value="28">Size 10                        </option>
            <option value="29">Size 12                        </option>
            <option value="30">Size 14                        </option>
            <option value="32">Size 16                        </option>
            <option value="31">Size 18                        </option>
            <option value="117">Made to Measure                        </option>
        </select>
    </div>
    <br />
    <div id="option-253" class="option">
        <b>Bust (cm):</b><br />
        <input type="text" name="option[253]" value="" class="input-text" />
    </div>
    <br />
    <div id="option-254" class="option">
        <b>Waist (cm):</b><br />
        <input type="text" name="option[254]" value="" class="input-text" />
    </div>
    <br />
    <div id="option-255" class="option">
        <b>Hips (cm):</b><br />
        <input type="text" name="option[255]" value="" class="input-text" />
    </div>
    <br />
</div>

JS:

var MTM = jQuery('#option[230]');
var select = this.value;
MTM.change(function () {
    if ($(this).val() == '117') {
        $('#option-253').show();
        }
    else $('#option-253').hide();
});

由于

2 个答案:

答案 0 :(得分:2)

您正试图在jquery中选择没有id

首先在选择控件上定义Id,如下所示

 <select name="option[230]" id="option--230">

使用如下:

jQuery('#option--230').change(function () {
    if ($(this).val() == '117') {
        $('#option-253').show();
        }
    else $('#option-253').hide();
});

然后用作

jQuery('select[name="option[230]"]').change(function () {
    if ($(this).val() == '117') {
        $('#option-253').show();
        }
    else $('#option-253').hide();
});

Demo

答案 1 :(得分:0)

你的选择器错了。您使用的选择器#option[230]将选择ID为option且属性230的元素,如<select id="option" 230>..</select>

在这种情况下,您可以使用name元素的select作为选择器,如下所示......

var MTM = jQuery('select[name="option[230]"]');
MTM.change(function () {
    $('#option-253').toggle(this.value == 117);
    $('#option-254').toggle(this.value == 117);
    $('#option-255').toggle(this.value == 117);
}).change();

演示:Fiddle