2016-08-11 3 views
-1

На моей странице html есть меню для выбора usertype, min age и max age. Мне нужно выбрать опции и передать значения ajax в качестве объекта массива. Когда я загружаю страницу getAjax, функция работает. но когда я выбираю любую опцию в меню выбора, она не работает.Как получить небольшое значение выбора, используя одну функцию jquery

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

+0

Try '$ ("# usertypeSelect, # ageSelect1, # ageSelect2") change' –

ответ

1

Для множественного выбора вам нужно поместить все селекторы в одинарные кавычки. Here найти ссылку

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

Кроме того, первоначально dataPara объект не содержит ageSelect1 & ageSelect2. Они будут добавляться только в случае изменений в select

0

Я считаю, что в jQuery для выбора нескольких классов/идентификаторов в одной строке они все равно должны находиться в одном наборе кавычек. Таким образом, линия:

$("#usertypeSelect", "#ageSelect1", "#ageSelect2").change(function() { 

Если вместо чтения:.

$("#usertypeSelect, #ageSelect1, #ageSelect2").change(function() { 
0
$("#usertypeSelect, #ageSelect1, #ageSelect2").on('change', function() { 
    dataPara[$(this).attr('id')] = parseInt($(this).val()); 
    getAjax(ajaxUrl, dataPara); 
}); 

Попробуйте

+0

Хотя это может ответить на вопрос, пожалуйста, предоставьте любое объяснение, которое вы можете сделать, чтобы люди поняли, что здесь происходит. – Randy

Смежные вопросы