Javascript jQuery 选择选项值

jQuery select option value

提问by olo

How do you set the "city" value to the same thing as country value when there is no option for a city?

当没有城市选项时，如何将“城市”值设置为与国家/地区值相同的值？

For example, Benin doesn't have an option to select a city inside of it. At this link http://jsfiddle.net/yPb6N/1/, if you select "Benin", underneath the dropdown it displays Benin undefined. How do you make it display Benin Benin?

例如，贝宁没有选择其中一个城市的选项。在此链接http://jsfiddle.net/yPb6N/1/，如果您选择“贝宁”，则在下拉菜单下方会显示Benin undefined。你如何让它显示Benin Benin？

<select id="country-select">
    <option value="us">US</option>
    <option value="germany">Germany</option>
     <option>Ireland</option>
    <option>Benin</option>
    <option>Italy</option>
</select>

<select id="us-select" class="sub-menu hide">
    <option value="austin">Austin</option>
</select>

<select id="germany-select" class="sub-menu hide">
    <option value="berlin">Berlin</option>
</select>
<p></p>
<font size="5"><font color="red"><div class="countryvalue" >Value</div></font></font> <br/>
?


function countrySelectChanged() {
    $('.sub-menu').hide();
    var selectedCountry = $('#country-select').val();
    if (selectedCountry) {
        $('#' + selectedCountry + '-select').show();
    }
}

$(document).ready(function() {

    $('#country-select').change(countrySelectChanged );
     countrySelectChanged();

    $("#country-select").change(function () {
          var str = $('#country-select').val() + " " + $("#" + $("#country-select option:selected").val()  + "-select option:selected").val();
          $("#country-select option:selected").each(function () {
            });
          $(".countryvalue").text(str);
        })
        .change();
    });
?

.hide {
display: none;            
}?

My code is not working

我的代码不起作用

    if (($('#country-select').val() != "us") || ($('#country-select').val() != "germany")) {
    $("#" + $("#country-select option:selected").val() + "-select option:selected").val() == $('#country-select').val();
}

thanks :-)

谢谢 ：-）

回答by Aesthete

This line:

这一行：

var str = $('#country-select').val() + " " + $("#" + $("#country-select option:selected").val()  + "-select option:selected").val();

Needs to be somthing like:

需要像这样：

var country = $('#country-select option:selected').val();
var city = $("#" + country  + "-select option:selected").val() || country;
$(".countryvalue").text(country + " " +city);

This way, if the name of the city doesn't exist, it will use the name of the country. Also, it doesn't perform multiple selectors for the same element, which is wasteful.

这样，如果城市名称不存在，它将使用国家/地区名称。此外，它不会为同一个元素执行多个选择器，这是一种浪费。

Here is the updated fiddle.

这是更新的小提琴。

回答by Samuel Caillerie

I guess that you want to print only the country name if there is no city associated with this country. If so, I have created this fiddle : http://jsfiddle.net/scaillerie/tSgVL/1/.

如果没有与该国家/地区相关联的城市，我想您只想打印国家/地区名称。如果是这样，我已经创建了这个小提琴：http: //jsfiddle.net/scaillerie/tSgVL/1/。

In fact, you have to test if the list associated with your country exists or not :

实际上，您必须测试与您所在国家/地区相关联的列表是否存在：

hasCity = $("#" + $("#country-select option:selected").val() + "-select").length !== 0

and then print or not the country.

然后打印或不打印国家。

---

---

Edit

编辑

It seems that you want to duplicate the country, so depending of the previous test, you will have :

似乎您想复制国家/地区，因此根据之前的测试，您将拥有：

str = $country.val() + " " + (hasCity ? $("#" + country_val  + "-select option:selected").val() : $country.val());

回答by hereandnow78

basically what @Aesthete said, i just refactored the whole function (took some minutes), maybe you like it (i updated the fiddle: http://jsfiddle.net/yPb6N/4/):

基本上是@Aesthete 所说的，我只是重构了整个函数（花了几分钟），也许你喜欢它（我更新了小提琴：http: //jsfiddle.net/yPb6N/4/）：

$(document).ready(function() {
  var country
    , city
    , $selected
    , $cs = $('#country-select')
    , $cv = $(".countryvalue");  
  $cs.on('change', function() {
      country = $cs.val() || $cs.text();
      $selected = $cs.find(':selected');
      city = $selected.val() || $selected.text();
      $('.sub-menu').addClass('hide');
      if($selected.val()) { 
        $('#' + $selected.val() + '-select').removeClass('hide');
        city = $('#' + $selected.val() + '-select').val() || country;
      }
      $cv.text(country + ' ' + city);
  });
  $cs.trigger('change');    
});?