Question

我正在尝试将3个下拉列表完全相同，但选择名称和选项值。我发现一个简单的JavaScript可以满足我的需求;但是，一旦我对选择列表进行组合，就无法使其工作。以下是我更改后的内容，不再正常工作。我对js并不擅长，所以对任何帮助表示赞赏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/   xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="includes/jquery1.7.js"></script>

<script language="javascript">
$(function() {
var selectValues = {
    "nokia": {
        "N97": "http://www.google.com",
        "N93": "http://www.stackoverflow.com"
    },
    "motorola": {
        "M1": "http://www.ebay.com",
        "M2": "http://www.twitter.com"
    }
};
for (var i=1;i<4;i++) {
    var $vendor+i = $('select.mobile-vendor'+i);
    var $model+i = $('select.model'+i);

    $vendor+i.change(function() {
        $model+i.empty().append(function() {
            var output = '';
            $.each(selectValues[$vendor+i.val()], function(key, value) {
                output += '<option value='+value+'>' + key + '</option>';
            });
            return output;
        });
    }).change();
}
});
</script>
<style type="text/css">
#download-link {
padding: 13px 15px 13px 15px;
font-size: larger;
font-decoration: underline;
background-color: #ffffbb;
border: 2px dashed red;
margin-top: 16px;
display: inline-block;
}
</style>
</head>

<body>
<p>  
<form action="?"  method="get">
<%for i=1 to 3%>
<select name="dvr_<%=i%>" class="mobile-vendor<%=i%>">
    <option value="motorola">Motorola</option>
    <option value="nokia">Nokia</option>
    <option value="android">Android</option>
</select>

<select name="cam_<%=i%>" class="model<%=i%>">
    <option></option>
</select>
<BR />
<%next%>
<input type="submit" value="submit" />
</form>
</p>
</body>
</html>

Answer 1

我认为你可以改变这些界限：

var $vendor+i = $('select.mobile-vendor'+i);
var $model+i = $('select.model'+i);

到

var $vendor = $('select.mobile-vendor'+i);
var $model = $('select.model'+i);

无需将计数器附加到变量名称。在函数内部只需参考$vendor和$model

编辑：试试这段代码

for (var i=1;i<4;i++) {
    var $vendor = $('select.mobile-vendor'+i);
    var $model = $('select.model'+i);

    $vendor.change(function() {
        var $o = $( this );
        $o.next().empty().append(function() {
            var output = '';
            $.each(selectValues[$o.val()], function(key, value) {
                output += '<option value='+value+'>' + key + '</option>';
            });
            return output;
        });
    }).change();
}

Answer 2

错误不仅仅是他们如何命名他们的变种？

var $vendor+i = $('select.mobile-vendor'+i);

不会那么孤单吗？

var $vendor = $('select.mobile-vendor'+i);

多个动态选择选项列表

2 个答案: