Question

我正在使用这4个下拉列表。当页面加载时只有'大小'下拉列表应该启用剩余不应该启用。当我从大小下拉列表中选择任何一个选项时，下一个样式下拉列表应该启用，这对于所有下拉列表都是相同的。下一个下拉列表在上一个下拉列表中被删除。当我从最后一个下拉列表中选择选项时，应该显示搜索按钮，当页面加载时我将其隐藏。我将图像作为搜索按钮。我需要简单的jquery代码。请帮助我。请参阅下面的代码：

    <div class="combotitle">Size</div>
        <form>
        <select id="Size" name="Size" class="select" 
        style="width:206px; border:#de73ff solid 1px; color:#444444;">
        <option selected="selected">Size</option>
        <option>Size</option>
        <option>Size</option>
        <option>Size</option>
        </select>
        </form>

        <div class="combotitle">Style</div>
        <form>
        <select id="Style" name="Style" class="select" 
        style="width:206px; border:#de73ff solid 1px; color:#444444;">
        <option selected="selected">Style</option>
        <option>Style</option>
        <option>Style</option>
        <option>Style</option>
        </select>
        </form>

        <div class="combotitle">Color</div>
        <form>
        <select id="Color" name="Color" class="select" 
        style="width:206px; border:#de73ff solid 1px; color:#444444;">
        <option selected="selected">Color</option>
        <option>Color</option>
        <option>Color</option>
        <option>Color</option>
        </select>
        </form>

        <div class="combotitle">Brand</div>
        <form>
        <select id="Brand" name="Brand" class="select" 
        style="width:206px; border:#de73ff solid 1px; color:#444444;">
        <option selected="selected">Brand</option>
        <option>Brand</option>
        <option>Brand</option>
        <option>Brand</option>
        </select>
        </form>

    <div class="CatsearchButton">
      <a href="#"><img src="/searchprd.png" alt="Search" title="Search" /></a>
    </div>
    </div>



<!--------------------------------------------------------------->
<!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=utf-8" />
<title>Product_Page</title>
<link href="css/product_page.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div class="Prdhead">

<!--wrapper start-->
<div id="Prdheawrap">

<div class="Prdheader">
<div class="PrdheadeLeft">
<div class="shopbyprd"><img src="/v/vspfiles/assets/images/shopbycategory_prdct.png" alt="" /></div>
<div class="catMenu">
<ul>
<li><a href="#">Bra Category Option-1</a></li>
<li><a href="#">Bra Category Option-2</a></li>
<li><a href="#">Bra Category Option-3</a></li>
<li><a href="#">Bra Category Option-4</a></li>
<li><a href="#">Bra Category Option-5</a></li>
<li><a href="#">Bra Category Option-6</a></li>
</ul>
</div>
</div>
<div class="PrdheadRight">
<div class="PrdformBox">
<div class="CatTitle"><img src="/v/vspfiles/assets/images/perfetcbra.png" alt="" /></div>

<div class="formContainer">
<div class="combotitle">Size</div>
<form>
<select id="Make" name="Make" class="select" onchange="test1(this.value)"
    style="width:206px; border:#de73ff solid 1px; color:#444444;">
<option selected="selected">Size</option>
<option>Size</option>
<option>Size</option>
<option>Size</option>
</select>
</form>

<div class="combotitle">Style</div>
<form>
<select class="select" id="year" name="year" onchange="test2(this.value)" 
    style="width:206px; border:#de73ff solid 1px; color:#444444;">
<option selected="selected">Style</option>
<option>Style</option>
<option>Style</option>
<option>Style</option>
</select>
</form>

<div class="combotitle">Color</div>
<form>
<select class="select" id="model" name="model" onchange="test3(this.value)" 
     style="width:206px; border:#de73ff solid 1px; color:#444444;">
<option selected="selected">Color</option>
<option>Color</option>
<option>Color</option>
<option>Color</option>
</select>
</form>

<div class="combotitle">Brand</div>
<form>
<select class="select" id="model2" name="model2" onchange="test4(this.value)"  
     style="width:206px; border:#de73ff solid 1px; color:#444444;">
<option selected="selected">Brand</option>
<option>Brand</option>
<option>Brand</option>
<option>Brand</option>
</select>
</form>

<div class="catBotBox">
<div class="checkbox">
<input type="checkbox" />
</div>
<div class="checktxt">
Sale Items<br  /> Only</div>
<div class="CatsearchButton">
    <a href="#">
        <img src="/v/vspfiles/assets/images/searchprd.png" 
        alt="Search" title="Search" onclick="callRedir(model.value)" 
        style="display:none" />
    </a>
</div>
</div>
</div>

<div id="data" style="display:none"></div>  


</div>
</div>

</div>
<!--wrapper end-->
</div>
</div>
<script type="text/javascript">
            var jSelect1=$("select[name='Make']");
              jSelect1.attr('disabled', 'disabled');

            var jSelect2=$("select[name='year']");
              jSelect2.attr('disabled', 'disabled');

            var jSelect3=$("select[name='model']");
              jSelect3.attr('disabled', 'disabled');

              var jSelect4=$("select[name='model2']");
              jSelect4.attr('disabled', 'disabled');

            </script>

            <script type="text/javascript">

            function test1(val) 
            {

            var jSelect2=$("select[name='year']");
              jSelect2.attr('disabled', 'disabled');

            var jSelect3=$("select[name='model']");
              jSelect3.attr('disabled', 'disabled');

              dataRead(val);

            }

        function dataRead(valData)
        {

          // $("#list1").append('<img class="select" align="middle" id="img1"
              // width=22px height=23px src="/v/vspfiles/assets/images/loading_circle-
              //sm.gif">');
           var html="";
            $.ajax({
             type: "GET",
             url: valData,
             dataType: "html",
             async:false,
             cache: true,
             success: function(data){

                 if(data)
                 {
                  html=data;

                 }
             }

          });             

           var options1='<option value="">[ Select Your Series ]</option>';
          cn=$(html).find('div').each(function(){

          if($(this).attr('class')=='right')
          {
              var cnt=$(this).find('a').each(function(){

                if($(this).attr('class')=='subcategory_link')
                {

                options1=options1+'<option 
                            value='+$(this).attr('href')+'>'+$(this).text()+'</option>'
                }

              }).length;

              //alert(cnt);

          }
          }).length;
            $('#year').html("");
            var jSelect=$("select[name='year']");
                    jSelect.removeAttr('disabled');
           $('#year').append(options1); 

          // $("#img1").attr('src',"");

            //$("#text1").html('');         

        }
            function test2(val) 
            {

              var jSelect3=$("select[name='model']");
              jSelect3.attr('disabled', 'disabled');


              var jSelect4=$("select[name='model2']");
              jSelect4.attr('disabled', 'disabled');

              dataRead2(val);

            }


            function dataRead2(valData)
        {

         //$("#new1").append('<img class="select" align="middle" id="img2" 
             //width=22px height=23px 
             //src="/v/vspfiles/assets/images/loading_circle-sm.gif">');
           var html="";
            $.ajax({
             type: "GET",
             url: valData,
             dataType: "html",
             async:false,
             cache: true,
             success: function(data){

                 if(data)
                 {
                  html=data;

                 }
             }

          });


           var options1='<option value="">[ Select Your Cartridge# ]</option>';
          cn=$(html).find('div').each(function(){

          if($(this).attr('class')=='right')
          {
              var cnt=$(this).find('a').each(function(){

                if($(this).attr('class')=='subcategory_link')
                {

                options1=options1+'<option value='+$(this).attr('href')+'>'+$(this).text()+'</option>'
                }

              }).length;

              //alert(cnt);

          }
          }).length;
            $('#model').html("");

            var jSelect=$("select[name='model']");
                    jSelect.removeAttr('disabled');
           $('#model').append(options1); 

          // $("#img2").attr('src',"");

        }

<!--    #########   --> 
    function test3(val) 
            {

              var jSelect4=$("select[name='model2']");
              jSelect4.attr('disabled', 'disabled');

              dataRead3(val);

            }


            function dataRead3(valData)
        {

         //$("#new1").append('<img class="select" align="middle" id="img2"
             // width=22px height=23px src="/v/vspfiles/assets/images/loading_circle-
             //sm.gif">');
           var html="";
            $.ajax({
             type: "GET",
             url: valData,
             dataType: "html",
             async:false,
             cache: true,
             success: function(data){

                 if(data)
                 {
                  html=data;

                 }
             }

          });             

           var options1='<option value="">[ Select Your Cartridge# ]</option>';
          cn=$(html).find('div').each(function(){

          if($(this).attr('class')=='right')
          {
              var cnt=$(this).find('a').each(function(){

                if($(this).attr('class')=='subcategory_link')
                {

                options1=options1+'<option value='+$(this).attr('href')+'>'+$(this).text()+'</option>'
                }

              }).length;

              //alert(cnt);

          }
          }).length;
            $('#model2').html("");

            var jSelect=$("select[name='model']");
                    jSelect.removeAttr('disabled');
           $('#model2').append(options1); 

          // $("#img2").attr('src',"");
          }     


<!--###########-->

        function test4(val)
            {
               document.getElementById("CatsearchButton").style.display="block";

            }

            function getCookie(c_name)
             {

              var i,x,y,ARRcookies=document.cookie.split(";");

                for (i=0;i<ARRcookies.length;i++)
                {
                  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
                  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
                  x=x.replace(/^\s+|\s+$/g,"");

                  if (x==c_name)
                    {
                    return unescape(y);
                    }

                  }

            }

            function callRedir(valRed)
            {
             window.location.href=valRed;

            }

        function setCookie(c_name,value,exdays)
        {
        var exdate=new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
        document.cookie=c_name + "=" + c_value;
        }

        function setHref()
            {


            appendStr=getCookie("append_string");

            if(appendStr==null)
            {
            appendStr=1;
            }

            $("ul li.nav a").each(function(index){
            var st=$(this).attr("href");
            if(st.substring(0,18)=="/SearchResults.asp")
            {
              strHref= $(this).attr("href");
              strhref=strHref.split("&");
              if(appendStr==1)
              {
              strHref=strhref[0];
              }
              else
              {
              strHref=strhref[0]+appendStr;
              }
              $(this).attr("href",strHref);
            }
            });

            }
        setHref();  

    </script>     


</body>
</html>

Answer 1

尝试以下方法：

$('select:not("#Size")').find('option').prop('disabled', true);
$('.CatsearchButton').hide();

$('select').change(function(){      
    $(this).closest('form').next().next().find('option').prop('disabled', false)
})

$('#Brand').change(function(){
    $('.CatsearchButton').show();
})

DEMO

Answer 2

禁用选项不是跨浏览器的解决方案。它肯定不适用于Opera。您必须禁用整个菜单（或删除/重新插入选项）。

此外，如果（如javascript中所示）您希望选择菜单为空“选择一个选项”选项，那么您应该：

选择有效选项时，启用下一个菜单
在重新选择null选项时，禁用所有以下菜单。

这可以通过以下方式实现：

$('.CatsearchButton').hide();

var $selects = $('select.criterion');
$selects.not("#Brand").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('#Brand').change(function() {
    $('.CatsearchButton').show();
});

<强> DEMO

Answer 3

您可以使用disabled属性。

<form id="size_form">
    <label>Size</label>
    <select id="size_select" name="Size" class="select" style="width:206px; border:#de73ff solid 1px; color:#444444;">
        <option selected="selected">Size</option>
        <option>Size</option>
        <option>Size</option>
        <option>Size</option>
    </select>
    <input type="submit" value="Submit" />
</form>


<form id="style_form">
    <label>Style</label>
    <select id="style_select" disabled="disabled" name="Style" class="select" style="width:206px; border:#de73ff solid 1px; color:#444444;">
        <option selected="selected">Style</option>
        <option>Style</option>
        <option>Style</option>
        <option>Style</option>
    </select>    
</form>

然后：

$('#size_form').submit(function () {
    $('#style').removeAttr('disabled');
});

等......：）

使用jquery从一个下拉列表中选择选项后启用另一个下拉选项

3 个答案: