多個動態選擇選項列表

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

多個動態選擇選項列表

回答

相關問題