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>
Rating:
The post javascript – I am trying to make dropdown enabling using jquery appeared first on Javascript ASK.
via Javascript ASK http://javascriptask.phpfogapp.com/javascript-i-am-trying-to-make-dropdown-enabling-using-jquery.html
No comments:
Post a Comment