0

jqueryを使用してドロップダウンを有効にして検索をクリックすると、そのカテゴリページが開くはずです.しかし、私はそれを行うことができません.「SEARCH BY MAKE」ドロップダウンからいずれかのオプションを選択すると、次の「SEARCH BY MODEL」ドロップダウンが必要になります有効にすると、これは他のドロップダウンでも同じです。次のドロップダウンが前のドロップダウンに依存していることを意味します。最後のドロップダウンからオプションを選択すると、ページの読み込み時に非表示になっている検索ボタンが表示されます。「SEARCH BY MAKE」には多くのカテゴリがあります。検索ボタンをクリックした後、すべてのページが動的に開くようにしたい.この3つのドロップダウンに従って、カテゴリまたは製品ページが開くはずです.助けてください.次のコードを確認してください:

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

It is because you have spaces in the values so it does not go into the if statements.

于 2012-08-27T13:55:23.627 に答える
1

jQuery 1.7.2 を使用しているため、無効なプロパティを設定する代わりに.prop()を使用してください。.attr()あなたも間違って使用していました-それはor just だっ.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 !== ' '
});

プロパティは通常、シリアライズされた HTML 属性を変更することなく、DOM 要素の動的状態に影響を与えます。例には、input 要素の value プロパティ、inputs とボタンの disabled プロパティ、またはチェックボックスの checked プロパティが含まれます。.attr() メソッドの代わりに、.prop() メソッドを使用して無効化およびチェックを設定する必要があります。

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

編集：

jQuery を使用しているので、インライン コードを削除し、クリック イベントを 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 に答える