Question

我有这个：

http://jsfiddle.net/Mxkfr/2/

它可以工作，但我需要提交两个VALUE下拉到另一个页面进行mysql查询。现在，下拉列表的唯一方法是两个VALUE是否相同。

如何分配不同的内容以匹配，而不是VALUE

更新

将我的mysql查询添加到下拉列表后，它会在第一个下拉列表中的第20条记录后停止工作。这正是第20个。下拉有150条记录。

http://pastebin.com/rDRcNrGn

我将我的代码放在jsfiddle和pastebin上，因为我不希望它出现在谷歌上。

更新2

在这个问题上花了好几个小时后，我仍然无法弄清楚导致这个问题的原因。我改变了我的疑问，仍然没有运气。任何想法为什么会发生这种情况？

Answer 1

为什么不上课

喜欢这样

   <option value="whatever value" class="col3">layout 3</option>
    <option value="other value" class="col3">layout 4</option>
    <option value="col3_sms" class="col3">layout 5</option>

然后只是

$('.col3').show()

这是一个实例

http://jsfiddle.net/JKbjV/1/

Answer 2

我会采用不同的方法，使用data-属性来确定应禁用哪些下拉选项。

HTML：

<select name="column_select" id="column_select">
    <option value="1" selected>1 column</option>
    <option value="2">2 column</option>
    <option value="3">3 column</option>
</select>

<select name="layout_select" id="layout_select">
    <!--Below shows when '1 column' is selected is hidden otherwise-->
    <option data-col="1" value="none">none</option>

    <!--Below shows when '2 column' is selected is hidden otherwise-->
    <option data-col="2" value="layout-1">layout 1</option> 
    <option data-col="2" value="layout-2">layout 2</option>

    <!--Below shows when '3 column' is selected is hidden otherwise-->
    <option data-col="3" value="layout-3">layout 3</option>
    <option data-col="3" value="layout-4">layout 4</option>
    <option data-col="3" value="layout-5">layout 5</option>
</select>

JS：

$(document).ready(function() {
    $("#column_select").change(function() {
        var val = $(this).val();
        // not all browsers let you hide individual options; disable them instead
        $("#layout_select").children().prop('disabled',true).filter(function(i) {
                return $(this).data('col')<=val;
            }).prop('disabled',false);
    });
    $('#column_select').trigger('change');
})

http://jsfiddle.net/Mxkfr/88/

选择时下拉变化

2 个答案: