Question

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

例如，贝宁没有选择其中的城市的选项。在此链接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;            
}

我的代码无效

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

谢谢： - ）

Answer 1

这一行：

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

需要像：

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

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

Here is the updated fiddle.

Answer 2

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

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

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

然后打印或不打印国家。

修改

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

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

Answer 3

基本上是@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');    
});

jQuery选择选项值

3 个答案: