使用jQuery获取2个下拉项的选定值

I am using the sql to retrieve the values for dropdown. I am only able to get only the 1st dropdownbox item. how do i get the second dropdown value. I am fetching the data from sql.

我正在使用sql来检索下拉列表的值。我只能得到第一个下拉框项目。我如何获得第二个下拉值。我从sql获取数据。

<label for="category">Category</label>
<select name="parent_cat" id="parent_cat">
    <?php while($row = mysql_fetch_array($query_parent)): ?>
    <option value="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></option>
    <?php endwhile; ?>
</select>
<br/><br/>
<label for="city">city</label>
<select name="city" id="city">
    <?php while($row = mysql_fetch_array($query_parent1)): ?>
    <option value="<?php echo $row['city']; ?>"><?php echo $row['city']; ?></option>
    <?php endwhile; ?>
</select>
<br/><br/>

and my jquery looks like below

我的jquery看起来如下

$(document).ready(function(){
$("#parent_cat").change(function(){
    var selectedCountry = $("option:selected").val(); 
      alert("You have selected the Country - " + selectedCountry);

});
});

I am able to get the 1st dropdown value how can i also get the second dropdown value

我能够得到第一个下拉值,我怎么能得到第二个下拉值

$(document).ready(function(){
$("#city").change(function(){
    var selectedCountry1 = $("option:selected").val(); 
      alert("You have selected the city- " + selectedCountry1);

});
});

Can i know where i went wrong

我能知道我哪里出错了

2 个解决方案

#1

Looks like you are trying to get the value of the selected city in the change event handler.

看起来您正试图在更改事件处理程序中获取所选城市的值。

In the event handler this refers to the changed element, so you can just read the its value

在事件处理程序中,它引用了已更改的元素,因此您只需读取其值即可

$(document).ready(function () {
    $("#city").change(function () {
        var selectedCountry1 = this.value; //or $(this).val()
        //if you want to get the text of the selected option
        var text = $(this).find('option:selected').text(); //find the selected option inside the current select
        alert("You have selected the city- " + selectedCountry1);

    });
});

$(document).ready(function () {
    $("#parent_cat").change(function () {
        var selectedCountry = this.value; //or $(this).val()
        alert("You have selected the Country - " + selectedCountry);

    });
});

The problem with your code is $("option:selected") returns all the option elements which are selected, but when you use the getter .val() it will return only the value of the first selected option element's value, so you will be getting the same value everywhere.

代码的问题是$(“option:selected”)返回所有选中的选项元素,但是当你使用getter .val()时它只会返回第一个选中的选项元素值的值,所以你会到处都是相同的价值。

#2

you need to use

你需要使用

$(this).val();

instead of

$("option:selected").val();

#1