Question

我正在尝试使用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>

Answer 1

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

Answer 2

您正在使用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/

Answer 3

$(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

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

3 个答案: