JQuery/Javascript - 下拉列表从另一个下拉列表获取信息
我有2个下拉菜单。在第一个中你选择一个模型,在第二个中选择一个特定的模型。 http://jsfiddle.net/QskM9/JQuery/Javascript - 下拉列表从另一个下拉列表获取信息
例如:
drop down 1:
Nokia
Samsung
Apple -if this is selected, the second drop down shows:
Drop down 2:
iPhone 3
iPhone 3Gs
iPhone 4 -When this is selected, go to www.apple.com (for example)
我一直想这个整天不能似乎使这项工作。 这是我有这么远:
// HTML
<form method="get" name="box">
<select id="opsaetning" name="opsaetning" onchange="changelist(this)">
<option selected="selected">Model</option>
<option label="Apple">Apple</option>
<option label="Nokia">Nokia</option>
<option label="Samsung">Samsung</option>
</select>
<select id="model" name="model" onchange="document.location=$(this).val();">
<option value="www.apple.com" selected="selected">iphone 4</option>
</select>
</form>
//SCRIPT
<script type="text/javascript" language="javascript">
var lists = new Array();
// Apple
lists['Apple'] = new Array();
lists['Apple'][0] = new Array(
'Forbered Gmail til mobilen');
lists['Apple'] = new Array(
'www.apple.com/ihphone3g',
'www.apple.com/iphone4');
function changelist(){
list = lists[box.options[box.selectedIndex].value];
sletListe(box.form.model);
fyldListe(box.form.model, list);
}
function sletListe(box){
while(box.options.length)box.options[0] = null;
}
function fyldListe(box, lists){
for(i=0; i< arr[0].length; i++){
option = new Option(arr[0][i], arr[l][i]);
box.options[box.length] = option;
}
box.selectedIndex=0;
}
</script>
谁能帮助我得到它的工作?注意我不能使用PHP,.NET,Perl等,只能使用HTML和js/jq。
试试这个:
var options = {
"Apple" : {
'ihphone3g': 'http://www.apple.com/ihphone3g',
'iphone4': 'http://www.apple.com/iphone4'
}
}
function changelist(v){
var $t = $("#model");
//clear old options
$t.html('');
//fill up new options
if(options[v]){
for(var i in options[v]){
if(options[v].hasOwnProperty(i)){
$t.append('<option value="' + options[v][i] + '">' + i + '<\/option>')
}
}
}
}
function getCo(cid){
var countryVal=$('#cmbCountry').val();
$.post("<?php echo url_for('country/ajaxloadcourse') ?>", //Ajax file
{ cid: cid }, // create an object will all values
//function that is called when server returns a value.
function(data) {
var selectbox="<select name='province' id='province' class='formSelect' style='width: 150px;' tabindex='4' onchange='getCourseId(this.value,"+countryVal+")'>";
selectbox = selectbox +"<option value=''><?php echo __('--Select--') ?></option>";
$.each(data, function(key, value) {
selectbox=selectbox +"<option value="+key+">"+value+"</option>";
});
selectbox=selectbox +"</select>";
$('#provincelist').html(selectbox);
},
//How you want the data formated when it is returned from the server.
"json"
);
}
TY的快速响应..但我不能üPHP这个:( –
这是你在找什么? http://jsfiddle.net/sEB5k/4/(正下方)或http://jsfiddle.net/npvym/14/(远低于)
var lists = new Array();
lists['Model'] = new Array();
lists['Apple'] = new Array(
'www.apple.com/ihphone3g',
'www.apple.com/iphone4');
lists['Nokia'] = new Array(
'http://www.nokiausa.com/us-en/products/phone/e7-00/',
'http://www.nokiausa.com/us-en/products/phone/c6-01/');
lists['Samsung'] = new Array(
'http://www.samsung.com/us/mobile/cell-phones/SPH-D710ZKASPR',
'http://www.samsung.com/us/mobile/cell-phones/SGH-T989ZKBTMB');
function changelist(select){
list = lists[select.options[select.selectedIndex].value];
sletListe(select.form.model);
fyldListe(select.form.model, list);
}
function sletListe(box){
while(box.options.length)box.options[0] = null;
}
function fyldListe(box, list){
for(i=0; i< list.length; i++){
option = new Option(list[i], list[i]);
box.options[i] = option;
}
box.selectedIndex=0;
}
OR
我也采取Przemek的答案,它在很大程度上改进什么,我想你想要的。我认为它比我的原始解决方案更漂亮,设计更好。
HTML
<select id="company" name="company">
<option value="nokia" selected="selected">Nokia</option>
<option value="samsung">Samsung</option>
<option value="apple">Apple</option>
</select>
<select id="nokia" name="product" class="product">
<option value="#" selected="selected">Choose product</option>
<option value="http://www.nokiausa.com/us-en/products/phone/e7-00/">E7-00</option>
<option value="http://www.nokiausa.com/us-en/products/phone/c6-01/">C6-01</option>
</select>
<select id="samsung" style="display:none" class="product">
<option value="#" selected="selected">Choose product</option>
<option value="http://www.samsung.com/us/mobile/cell-phones/SGH-T989ZKBTMB">SGH-T989ZKBTMB</option>
<option value="http://www.samsung.com/us/mobile/cell-phones/SPH-D710ZKASPR">SPH-D710ZKASPR</option>
</select>
<select id="apple" style="display:none" class="product">
<option value="#" selected="selected">Choose product</option>
<option value="http://www.apple.com/iphone/iphone-4/specs.html">iPhone 4</option>
<option value="http://www.apple.com/iphone/iphone-3gs/specs.html">iPhone 3GS</option>
</select>
的JavaScript
$("#company").change(function() {
$('select[name="product"]').removeAttr("name").hide();
$("#" + $(this).val()).show().attr("name", "product");
});
$(".product").change(function() {
document.location = $(this).val();
});
我想出了这样的事情:
HTML:
<select id="company" name="company">
<option value="nokia" selected="selected">Nokia</option>
<option value="samsung">Samsung</option>
<option value="apple">Apple</option>
</select>
<select id="nokia" name="product">
<option value="1" selected="selected">6300</option>
<option value="2">3210</option>
<option value="3">3310</option>
</select>
<select id="samsung" style="display:none">
<option value="1" selected="selected">Galaxy S</option>
<option value="2">Galaxy S2</option>
<option value="3">Galaxy Tab</option>
</select>
<select id="apple" style="display:none">
<option value="1" selected="selected">iPhone 3</option>
<option value="2">iPhone 4</option>
<option value="3">iPhone 4S</option>
</select>
的jQuery:
$("#company").change(function() {
$('select[name="product"]').removeAttr("name").hide();
$("#" + $(this).val()).show().attr("name", "product");
});
ty :)生病尝试 –
thers很多选项,所以产品,没有必要从选择加载,然后隐藏它,这将需要更多的浏览器,然后它会从阵列。但非常感谢你:) –
很高兴我能帮到你。我只是觉得简单的隐藏和显示项目比从头开始重建它们要快。 – Przemek
ty给她试试:) –
这样做完美无瑕!谢谢 –