Home/ Questions/Q 8437151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T07:21:22+00:00

I am trying to make dropdown enabling using jquery and click search then that

  • 0

I am trying to make dropdown enabling using jquery and click search then that category page should open.But I am uable to do it.When I am selecting any one option from “SEARCH BY MAKE” dropdown the next “SEARCH BY MODEL” dropdown should enable and this is same for other dropdown.Means next dropdown is depanded on previous.When I select option from last dropdown the search button should display,which I am hiding when page loads.I have lot of categories in “SEARCH BY MAKE”.I want all the pages should open dynamically after clicking on search button.According to this three dropdowns the category or product page should open.Please help me out.Please check bellow code:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are using jQuery 1.7.2 so use .prop() instead of .attr() to set the disabled property.
    You were also using .removeAttr('disabled', false); wrong – it should have been .attr('disabled','false'); or just .removeAttr('disabled'), but it’s irrelevant once you switch to .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 !== ' '
});

    Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method.

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

    EDIT:

    Since you’re using jQuery just remove teh inline code and bind the click event inside document.ready function

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

    • 0