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

标签 javascript jquery

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

最佳答案

禁用选项不是跨浏览器解决方案。它在 Opera 中肯定行不通。您必须禁用整个菜单(或删除/重新插入选项)。

此外，如果(如 JavaScript 中所示)您想要选择带有空“选择选项”选项的菜单，那么您应该:

  • 选择有效选项后，启用下一个菜单
  • 重新选择空选项后，禁用所有以下菜单。

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

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

关于javascript - 使用jquery从一个下拉列表中选择选项后启用另一个下拉选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11699837/

上一篇：javascript - 页面刷新后使用 cookie.js 保持 div 的切换状态

下一篇：asp经典脚本 block 中使用的Javascript变量

相关文章：

jquery - 如何动态加载linkedin分享按钮？

javascript - 如何将 jQuery 插件中的数据设置到数据库 ASP .NET MVC？

javascript - 在 jQuery 中，text() 和 innerHTML 有什么区别？

javascript - 在多边形mouseenter上添加InfoWindow()，每个多边形一个内容

javascript - Magento - javascript 依赖 = 巨大的可用性问题

javascript - 当用户单击 div 时模拟按键操作和正常操作？

c# - 指定用户在文本框中输入数据的方式

Javascript:如何在由 %s 表示的字符串中获取值，然后用一个值替换

javascript - 使用 Fabric.js 在初始加载后修改 fabric.Image.fromURL

javascript - Vue2 事件总线在第二次调用后工作

©2024 IT工具网  联系我们