3

都市にオプションがない場合、「都市」の値を国の値と同じに設定するにはどうすればよいですか。

たとえば、ベナンにはその中の都市を選択するオプションがありません。このリンクhttp://jsfiddle.net/yPb6N/1/で、[Benin]を選択すると、ドロップダウンの下にが表示されます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

この国に関連付けられている都市がない場合は、国名のみを印刷することをお勧めします。もしそうなら、私はこのフィドルを作成しました：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 に答える
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 に答える