3

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

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

谢谢 ：-）

4

3 回答 3

4

这一行：

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

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

这是更新的小提琴。

于 2012-11-29T21:50:07.427 回答
1

基本上@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');    
});​
于 2012-11-29T21:58:05.040 回答
1

如果没有与该国家/地区关联的城市，我想您只想打印国家/地区名称。如果是这样，我创建了这个小提琴：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());
于 2012-11-29T21:48:42.080 回答