Geeth Welagedara Geeth Welagedara - 8 months ago 25
HTML Question

How to get few select value using one jquery function


page has select menus to select
min age
max age
. i need to select options and pass values to ajax as an array object. When i load the page
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) {
url: URL,
data: dataPara,
dataType: "html",
type: "POST",
success: function(retdata) {
} </script>

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



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