我正在尝试使用jquery进行下拉列表

时间:2012-08-27 13:45:32

标签: javascript jquery

我正在尝试使用jquery下载启用并单击搜索,然后该类别页面应该打开。但是我可以这样做。当我从“SEARCH BY MAKE”下拉列表中选择任何一个选项时,下一个“按模型搜索” “下拉应该启用,这对于其他下拉菜单也是一样的。下一次下拉菜单会在之前的下拉菜单中被删除。当我从最后一个下拉列表中选择选项时,应该显示搜索按钮,我在页面加载时隐藏它。我在”SEARCH BY中有很多类别制作“。我希望所有页面都应该在点击搜索按钮后动态打开。根据这三个下拉列表,应打开类别或产品页面。请帮帮我。请检查以下代码:

 <!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=iso-8859-1" />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<title>Untitled Document</title>
</head>

<body>
  <form>
        <select id="Make" name="Make" class="criterion">
        <option value="">SEARCH BY MAKE</option>
        <option value="1">ACURA</option>
        <option value="2">INTEGRA</option>
        <option value="3">MDX</option>
        </select>
  </form><br />
 <form>
        <select id="Model" name="Model" class="criterion">
        <option value="">SEARCH BY MODEL</option>
        <option value="1">XYZ</option>
       </select>
  </form><br />
  <form>
        <select id="Year" name="Year" class="criterion">
        <option value="">SEARCH BY YEAR</option>
        <option value="1">ABC</option>
  </form>
<br />
    <input type="submit" value="Search" class="CatsearchButton" />





<script type="text/javascript">



$(document).ready(function() {
$('.CatsearchButton').hide();

var $selects = $('select.criterion');
$selects.not("#Year").on('change', function() {
    $selects.each(function() {
        var $this = $(this);
        var disable = $this.val() == '';
        $this.closest('form').nextAll().find('select').prop('disabled', disable);
        if (disable) return false;
    })
}).eq(0).trigger('change');
$selects.filter('#Year').change(function() {
    $('.CatsearchButton').show();
});
});

</script>


</body>
</html>

3 个答案:

答案 0 :(得分:1)

这是因为你在值中有空格,所以它不会进入if语句。

答案 1 :(得分:1)

您正在使用jQuery 1.7.2,因此请使用.prop()代替.attr()来设置disabled属性。 您还使用了.removeAttr('disabled', false);错误 - 它应该是.attr('disabled','false');.removeAttr('disabled'),但是一旦切换到.prop()

就无关紧要了
$('.go').hide();
var jSelect2 = $(".model");
jSelect2.prop('disabled', true); 

var jSelect3 = $(".year");
jSelect3.prop('disabled', true);

$('.make').change(function() {             
        jSelect2.prop('disabled', $(this).val() == ' ');  // disable if val == ' '
        jSelect2.val(' ').change(); // set to default and trigger change   
});
jSelect2.change(function() {      
     jSelect3.prop('disabled', $(this).val() == ' '); // disable if val == ' '
     jSelect3.val(' ').change();  // set to default and trigger change 
 });
jSelect3.change(function() {      
        $('.go').toggle($(this).val() !== ' ');  // show if val !== ' '
});
  

属性通常会影响DOM元素的动态状态,而不会更改序列化的HTML属性。示例包括输入元素的value属性,输入和按钮的disabled属性或复选框的checked属性。应该使用.prop()方法来设置disabled和checked而不是.attr()方法。

http://jsfiddle.net/CE5VN/1/

修改

由于您正在使用jQuery,只需删除内联代码并将click事件绑定到document.ready函数

$('.go').click(function(e) {
        e.preventDefault();
        location = 'www.lightsmax.com/category_s/' + myform.make.options[myform.make.selectedIndex].value + '.htm' + myform.model.options[myform.model.selectedIndex].value + '/' + myform.year.options[myform.year.selectedIndex].value;
});

http://jsfiddle.net/CE5VN/2/

答案 2 :(得分:1)

$(document).ready(function() {
    $("select").each(function(i){
        $(this).addClass("class-" + i);
    });
    $("select").each(function(i){
        $(this)[0].disabled = true;
        $(this).change(function(){
           if($(this).val()!=""){
              $(".class-" + (i + 1))[0].disabled = false;
           }
        });
    });
    $("select:eq(0)")[0].disabled = false;  
});

I am adding fiddle here