0

我正在尝试使用 jquery 启用下拉菜单并单击搜索，然后该类别页面应该打开。但我可以这样做。当我从“SEARCH BY MAKE”下拉菜单中选择任何一个选项时，下一个“SEARCH BY MODEL”下拉菜单应该启用，这与其他下拉菜单相同。意味着下一个下拉菜单依赖于上一个。当我从最后一个下拉菜单中选择选项时，应该显示搜索按钮，当页面加载时我会隐藏它。我在“SEARCH BY MAKE”中有很多类别。我希望在单击搜索按钮后所有页面都应该动态打开。根据这三个下拉列表，应该打开类别或产品页面。请帮帮我。请检查以下代码：

 <!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>
4

3 回答 3

1

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

于 2012-08-27T13:55:23.627 回答
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() 方法来设置禁用和检查，而不是 .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/

于 2012-08-27T13:57:58.183 回答
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;  
});

我在这里添加小提琴

于 2012-08-27T14:23:11.080 回答