如何更改基于第一个下拉选择的第二个下拉值
How to change second drop-down value based first drop-down selection?
我有两个下拉列表,即Min Price
和Max Price
,我想根据第一个选择更改第二个下拉值。
举个例子1st drop-down selection is 100 means, 2nd drop-down value should be greater than the 100, if it is 200 in 1st, value of 2nd should be greater than 200
有关于jQuery或js的想法吗?
我能想到的最简单的(这可以让你回到你的选择,你可以选择400,然后选择200,一切都可以)
<select id='min'>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='300'>300</option>
<option value='400'>400</option>
</select>
<select id='max'>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='300'>300</option>
<option value='400'>400</option>
</select>
var removed;
$('#min').change( function() {
var value = this.value;
$('#max').prepend(removed);
var toKeep = $('#max option').filter( function( ) {
return parseInt(this.value, 10) >= parseInt( value, 10);
} );
removed = $('#max option').filter( function( ) {
return parseInt(this.value, 10) < parseInt( value, 10);
} );
$('#max').html(toKeep);
});
http://jsfiddle.net/NjLNF/2/
EDIt-根据注释添加parseInt()
您可以使用jquery和change函数。如果第一个下拉列表的id是drop1,则它将是$("#drop1").change(function(){..将您的函数放在此处以填充第二个下拉列表。.
$('#first_dd').change(function(){
var dd_val=$(this).val();
var options = "";
$('#second_dd').html('');
for(var i=parseInt(dd_val+1);i<=END-LIMIT;i++)
{
$('#second_dd').append('<option value='+i+'>'+i+'</option>');
}
});
我还没有在浏览器中测试它。考虑系统,只需遵循逻辑即可。
$(function () {
$("#one").change(function (e) {
$("#two").empty();
var options =
$("#one option").filter(function(e){
return $(this).attr("value") > $("#one option:selected").val();
}).clone();
$("#two").append(options);
});
});
在"最低价格"下拉列表中添加一个侦听器,然后循环查看"最高价格"下拉菜单的值,直到找到一个大于所选"最低价格》下拉列表的值。像这样的
$('#minPrice').change(function(){
var minVal = $('#minPrice option:selected').val();
$('#maxPrice option').each(function(){
if(minVal < $(this).val()){
$(this).attr('selected', 'selected');
return false;
}
});
});
相关文章:
- 下拉选择可自动更改第二个下拉选择
- 为什么不'在JQuery中找到第二个css选择器的工作
- 如何根据第一个<选择>选项填充第二个<选择>选项
- jquery.chained.min.js设置值为第二个选择
- jQuery 根据第一个选择菜单中的值选择填充第二个选择菜单
- 下拉列表 在第二个选择第一个选择时不会显示:无;
- jquery:如果第一个选择器返回为空,有没有一种简明的方法可以有条件地使用第二个选择器
- 为什么Flexslider中的一个选择器工作,而第二个选择器不工作;t
- 自动设置第二个选择字段值
- 使用javascript在第一个选择列表选项的基础上更改第二个选择列表
- 从第一个和更改操作属性填充第二个选择列表
- 显示基于第一个选择框中选择的选项的第二个选择框
- 如何阻止对选择列表的更改影响第二个选择
- 在选择第一个选择框值后填充第二个选择框,如何在脚本中选择要编辑的值
- 如果第一个选项已被选中,则从第二个选择中删除该选项
- 如何基于第一个选择填充第二个选择菜单,基于第二个填充第三个选择菜单-使用Javascript
- Ajax表单.当从第一个选项中选择一个选项时,更新第二个选择
- jQuery如何基于第三个选择列表选项更改第二个选择列表,并基于第一个更改第二选择列表
- 我想在第一个选择的基础上填充第二个选择表单.两者都在从sql数据库中检索它们的元素
- 填充第二个<选择>基于第一个