使用jQuery

Question

我正在使用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/>

我的jquery如下所示

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

});
});

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

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

});
});

我能知道我哪里出错吗

Answer 1

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

在事件处理程序this中引用已更改的元素，因此您只需读取其值

$(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);

    });
});

您的代码问题$("option:selected")会返回所有选定的option元素，但是当您使用getter .val()时，它将仅返回第一个选定的option的值1}}元素的值，因此您将在任何地方获得相同的值。

Answer 2

你需要使用

size/2

而不是

$(this).val();