多个动态选择选项列表

我想填充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>

来源

2014-02-18 user3324811

我想你可以改变这些行：

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(); 
}

来源

2014-02-18 19:04:15

我试过你的建议，结果是第2个模型选择不再出现。第三个工程。 – user3324811

yup，我将脚本代码 – user3324811

中的所有$ vendor + i和$ model + i更改为$ vendor和$ model，应该有3个地方可以更改。我编辑了我的答案，请检查我的解决方案 –

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

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

会不会这么孤单？

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

来源

2014-02-18 19:04:45

多个动态选择选项列表

回答

相关问题