Geeth Welagedara Geeth Welagedara - 3 months ago 7
HTML Question

How to get few select value using one jquery function

My

html
page has select menus to select
usertype
,
min age
and
max age
. i need to select options and pass values to ajax as an array object. When i load the page
getAjax
function is working. but when i select any option on select menu, it is not working.



<script type = "text/javascript" >
$(document).ready(function() {
var ajaxUrl = '<?php echo base_url(); ?>' + 'main/search';

var dataPara = {
usertype: 1,
ageSelectStart: 21,
ageSelectEnd: 35
};

getAjax(ajaxUrl, dataPara); //working
//following code is not working
$("#usertypeSelect", "#ageSelect1", "#ageSelect2").change(function() {
dataPara[$(this).attr('id')] = parseInt($(this).val());
getAjax(ajaxUrl, dataPara);
});

});

function getAjax(URL, dataPara) {
$.ajax({
url: URL,
data: dataPara,
dataType: "html",
type: "POST",
success: function(retdata) {
$("#mainData").html(retdata);
}
});
} </script>

<html>
<div class="side-menu-container">
<ul class="nav">
<li>
<label>User type</label>
<select id="usertypeSelect">
<!-- options here-->
</select>
</li>
<li>
<label>Age</label>
<select id="ageSelect1">
<!-- options here-->
</select>
<label>To</label>
<select id="ageSelect2">
<!-- options here-->
</select>
</li>
</ul>
</div>

</html>




Answer

For multiple selector you need to put all the selectors in a single quote.Here is a link

$("#usertypeSelect,#ageSelect1,#ageSelect2").change(function() {
      // Rest of code
    });

Also initially dataPara object does not contain ageSelect1 & ageSelect2. They will only be appended on there is a change in respective select