Question

我有以下下拉列表框：

      <select name="DDLConditional1" size="1">
            <option selected="selected">is equal to</option>
            <option>begins with</option>
            <option onclick="ShowBetween();">is between</option>
            <option>is not equal to</option>
            <option>is greater than</option>
            <option>is less than</option>
        </select>

我想根据某人选择下拉列表中的“介于两者之间”选项来显示（）文本框和标签。我有这些下拉列表的倍数，所有这些都必须做同样的事情。换句话说，我有 DDLConditional1 2 3 4 ......无限。我已经能够使按钮工作，附加新的条件。

Answer 1

我将摆脱内联处理程序赋值，并使用jQuery来管理你的处理程序。

听起来<select>元素被动态添加到DOM中，因此使用jQuery's .live() method来处理这些动态元素。

示例： http://jsfiddle.net/GPMmJ/

$(function() {
    $('select[name^=DDLConditional]').live('change', function() {
        if( $(this).val() === 'is between') {
            alert('is between was selected');
        }
    });
});

每当<select>名称starts with DDLConditional添加到页面中时，change处理程序都会自动生效。它使用jQuery's .val() method获取所选内容的值，并检查它是否为in between。

Answer 2

为什么不在onChange事件中使用jQuery而不是onClick：

jQuery(document).ready(function() {    

   jQuery("select[name^=DDLConditional]").live("change", function() {
      if(jQuery("option:selected", this).text() === "is between") {
         //display the textbox and label
      }
   });
});

此代码在页面加载后运行。它会查找名称以select开头的所有DDLConditional个元素。然后使用live（以便考虑可以动态添加的未来元素）将处理程序绑定到change事件。

Answer 3

可以肯定的是，只需将<select>包装在div中，您就可以使用jQuery轻松附加文本框。类似的东西：

<div class="conditional>
    <select name="DDLConditional1" size="1">
        ...
    </select>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        // store our select as a jQuery object
        var $select = $(".conditional select");
        $select.change(function() {
            // get our parent (the div)
            var $wrapper = $(this).closest(".conditional");

            // if the selected option's text is "in between"
            if($("option:selected", this).text() == "is between") {
                // append a textbox
                var $newTextbox = $("<input type='text' />");
                $newTextbox.css('color', 'red'); //perhaps set some CSS properties?
                $wrapper.append($newTextbox);
            }
        });
    });
</script>

以下是适用于IE 7/8，Firefox，Chrome和Safari的example。

Answer 4

您不希望onclick - 您想要使用onchange的{{1}}，在那里您将测试其当前值，看看它是否是您想要的。

从下拉列表中调用jquery函数

4 个答案: