Question

我想根据下拉选项列表中的选项在命名div之后插入dom元素这是我的代码来测试这个。

<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<script type="text/javascript" src="../jsstuff/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
    <script>
     $(funtion(){('#testselect').change(function(){
    var selid = $(this).find('#testselect :selected').val();
    if (selid == "Yes"){
        $("<div><span>test option</span></div>").insertAfter("#inner");
    }
}
)
)

</script>
<title>Untitled 2</title>

</head>

<body>
<div id="outer">
    <div id="inner">
        <select id="testselect" name="testselect">
            <option value="" selected="selected"></option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </div>    
 </div>

</body>
</html>

它不起作用。

Answer 1

使你的功能：

$('#testselect').change(function () {
    if ($(this).val() == "Yes") {
        $("<div><span>test option</span></div>").insertAfter("#inner");
    }
})

<强> jsFiddle example

.find()会查看后代元素，因此$(this).find('#testselect :selected')不会匹配任何内容，因为此处this已经#testselect。您可能一直在考虑的是$(this).find('option:selected').val()，但$(this).val()更短且更常用。请注意，重复更改select元素将重复添加更多测试选项div。所以你可能更喜欢拥有一套deiv而只是显示/隐藏它。

Answer 2

看起来您发布的代码中存在一些错误。在事件处理程序中有一些简单的错误，如拼写和缺少$。此外，您可以简化获取下拉列表值的方式。这是一个例子。

<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script>
    $(function(){
        $('#testselect').change(function() {
            var selid = $(this).val();
            if (selid == "Yes"){
                $("<div><span>test option</span></div>").insertAfter($("#inner"));
            }
        });
    });

</script>
<title>Untitled 2</title>

</head>

<body>
<div id="outer">
    <div id="inner">
        <select id="testselect" name="testselect">
            <option value="" selected="selected"></option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </div>    
 </div>

</body>
</html>

使用jquery根据选项添加dom元素：选择的选项

2 个答案: