Question

我有这个问题...我想用ajax使节目隐藏一些下拉菜单，我不知道在哪里放置节目隐藏代码...它只显示第一个国家，选择国家/地区后，然后选择要显示的城市州。 ...您能帮我解决此代码吗？这是我的代码和脚本

<div class="frmDronpDown">
        <div class="row">
          <label>Country:</label><br/>
          <select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value disabled selected>Select Country</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["country_name"]; ?></option>
<?php
}
?>
</select>
        </div>
        <div class="row">
          <label>State:</label><br/>
          <select name="state" id="state-list" class="demoInputBox" onChange="getCity(this.value);">
<option value="">Select State</option>
</select>
        </div>
        <div class="row">
          <label>City:</label><br/>
          <select name="city" id="city-list" class="demoInputBox">
<option value="">Select City</option>
</select>
        </div>
      </div>

 function
        getState(val) {
          $.ajax({
            type: "POST",
            url: "getState.php",
            data: 'country_id=' + val,
            success: function(data) {
              $("#state-list").html(data);
              getCity();
            }
          });
        }


        function
        getCity(val) {
          $.ajax({
            type: "POST",
            url: "getCity.php",
            data: 'state_id=' + val,
            success: function(data) {
              $("#city-list").html(data);
            }
          });
        }

Answer 1

您可以使用.prop。您可以参考here.

您必须以$(document).ready(function())开始脚本，以便JS知道页面是否已加载并准备就绪。

然后在这里考虑此逻辑。（示例代码）

if($("#country-list option:selected").index() == 0){

                $("#state-list").prop("hidden", true);

                }else{

                $("#state-list").prop("hidden", false);
            }

上面的代码实际上检查在加载页面时是否未选择国家/地区列表项，另一个下拉列表将其视为隐藏的，否则显示出来。

Answer 2

在HTML的州和城市下拉菜单中添加一个隐藏的类，以将其从初始状态隐藏起来。选择国家/地区后，显示州下拉菜单。

如果选择了“选择”选项/清除了值，则将隐藏的类添加到级联下拉列表中

var 
stateContainer = $('.state-container'),
cityContainer = $('.city-container'),
countryList = $('#country-list'),
stateList = $('#state-list'),
cityList = $('#city-list');

countryList.on('change', function() {

  if (this.value === '') {
    stateContainer.addClass('hidden');
    cityContainer.addClass('hidden');
    stateList.val('');
    cityList.val('');
  } else {

    stateContainer.removeClass('hidden');
    //getState(this.value);
  }
});

stateList.on('change', function() {
  if (this.value === '') {
    cityContainer.addClass('hidden');
    cityList.val('');
  } else {

    cityContainer.removeClass('hidden');
    //getCity(this.value);
  }

});

.hidden {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frmDronpDown">
  <div class="row">
    <label>Country:</label><br/>
    <select name="country" id="country-list" class="demoInputBox" >
      <option value="" selected>Select Country</option>
      <option value="A">Country A</option>
    </select>
  </div>

  <div class="row state-container hidden">
    <label>State:</label><br/>
    <select name="state" id="state-list" class="demoInputBox" >
      <option value="">Select State</option>
      <option value="A">State A</option>
    </select>
  </div>

  <div class="row city-container hidden">
    <label>City:</label><br/>
    <select name="city" id="city-list" class="demoInputBox">
      <option value="">Select City</option>
      <option value="A">City A</option>
    </select>
  </div>
</div>

jQuery-下拉ajax显示/隐藏

2 个答案: