Question

我有2个选择框。第一个是国家选择。如果我选择了国家/地区，我将获得特定国家选择的选项值。

示例如果我选择法国国家/地区仅在选择框中显示法国语言列表。其他选择框禁用。我想获得第二个选择框选择选项的值。

请帮帮我朋友

    <div class="country-selection">
    <select id="country" > 
        <option value="USA">United States of America</option>
        <option value="united-kingdom" >United Kingdom</option>
        <option value="france">France</option>
        <option value="germany">Germany</option>
        <option value="spain">Spain</option>
    </select>
    </div>
    <div id="lan-selection">
        <div class="united-states-selected USA language-selection" id="united-states-selected">
        <select class="lan-selection" >    
                <option value="english">English</option>
                <option value="Spanish">Spanish</option>
                <option value="OtherLan">Others</option>
        </select >
        </div>
        <div class="united-kingdom-selected language-selection" id="united-kingdom-selected">
        <select class="lan-selection">
                <option value="english">English</option>
                <option value="French">French</option>
                <option value="OtherLan">Others</option>
        </select>
        </div>
        <div class="france-selected language-selection" id="france-selected">
        <select class="lan-selection">
                <option value="english">English</option>
                <option value="French">French</option>
                <option value="OtherLan">Others</option>
        </select>
        </div>
        <div  class="german-selected language-selection" id="german-selected">
        <select  class="lan-selection"   >
                <option class="en-de" value="english">English</option>
                <option value="German">German</option>
                <option value="OtherLan">Others</option>
        </select>
        </div>
        <div class="spain-selected language-selection" id="spain-selected">
        <select  class="lan-selection" >
                <option value="english">English</option>
                <option value="Spanish">Spanish</option>
                <option value="OtherLan">Others</option>

        </select>
        </div>

    </div>

Answer 1

尝试此操作：您可以将更改事件绑定到国家/地区选择框，然后选择国家/地区隐藏所有语言选择框，然后显示相关的选择框。

您应该对所有语言div id遵循相同的命名约定，因此我认为语言ID选择div与'countryOptionValue-selected'相同。这有助于我们确定所选国家/地区的语言div。我对USA和Germany -

进行了更正

<div class="country-selection">
    <select id="country" > 
        <option value="USA">United States of America</option>
        <option value="united-kingdom" >United Kingdom</option>
        <option value="france">France</option>
        <option value="germany">Germany</option>
        <option value="spain">Spain</option>
    </select>
    </div>
    <div id="lan-selection">
        <div class="united-states-selected USA language-selection" id="USA-selected">
        <select class="lan-selection" >    
                <option value="english">English</option>
                <option value="Spanish">Spanish</option>
                <option value="OtherLan">Others</option>
        </select >
        </div>
        <div class="united-kingdom-selected language-selection" id="united-kingdom-selected">
        <select class="lan-selection">
                <option value="english">English</option>
                <option value="French">French</option>
                <option value="OtherLan">Others</option>
        </select>
        </div>
        <div class="france-selected language-selection" id="france-selected">
        <select class="lan-selection">
                <option value="english">English</option>
                <option value="French">French</option>
                <option value="OtherLan">Others</option>
        </select>
        </div>
        <div  class="germany-selected language-selection" id="germany-selected">
        <select  class="lan-selection"   >
                <option class="en-de" value="english">English</option>
                <option value="German">German</option>
                <option value="OtherLan">Others</option>
        </select>
        </div>
        <div class="spain-selected language-selection" id="spain-selected">
        <select  class="lan-selection" >
                <option value="english">English</option>
                <option value="Spanish">Spanish</option>
                <option value="OtherLan">Others</option>

        </select>
        </div>

    </div>

jQuery -

$(function(){
  //initially hide all languages but the defualt selected  
  $('div.language-selection').hide();
  $('#'+$('#country').val()+'-selected').show();

  $('#country').on('change',function(){
      var selectedCountry = $(this).val();
      $('div.language-selection').hide();//hide all languages
      $('#'+selectedCountry+'-selected').show();//show selected languages
  });
});

<强> JSFiddle Demo

从所选国家语言列表中获取价值

1 个答案: