Question

我知道还有其他与此有关的问题，但我无法获得为我的用例工作的公认答案。

我目前正在隐藏/显示选择更改的相应div，所以如果您从下拉菜单中选择牙买加，它将只显示牙买加div和英国的相同等等。

这就是我想要实现的目标：

在页面加载时我默认选择英国，我希望显示英国div，而不是其他div。目前它们都显示，这是不正确的。我怎样才能解决这个问题？我到目前为止的代码是：https://jsfiddle.net/33xfzvg8/1/

if ($("#country option:selected")){
  $('#delivery' + $('#country option:selected').val()).show();
} else {
  $('.box').hide();
}

Answer 1

$( document ).ready( function() {
if ( $('#country').val() ){
    $( '#delivery' + $("#country").val() ).show();
}

$('#country').change(function() {
    $('.box').hide();
    $('#delivery' + $(this).val()).show();
});

} );

请参阅：https://jsfiddle.net/psc0uput/3/

Answer 2

您最初应hide全部并且仅显示所选选项。

if ($("#country option:selected")){
    $('.box').hide();
    $('#delivery' + $('#country option:selected').val()).show();
}

此外，最简单的方法是trigger使用trigger方法更改事件处理程序。

$('#country').change(function() {
    $('.box').hide();
    $('#delivery' + $(this).val()).show();
}).trigger('change');

＆＃13;

$('#country').change(function() {
  $('.box').hide();
  $('#delivery' + $(this).val()).show();
}).trigger('change');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="delivery-select one-whole text-center">
  <form>
    <label for="country">Deliver to</label>
    <select id="country" name="country">
      <!--<option value="0">Change</option>-->
      <option value="country1" name="country1" selected>United Kingdom</option>
      <option value="country2" name="country2">Jamaica</option>
    </select>
  </form>
</div>
<hr>
<div class="rte">
  <div id="deliverycountry1" class="box">
  Delivering to the UK
  </div>
  <div id="deliverycountry2" class="box">
  Delivering to Jamaica
  </div>
</div>

＆＃13;

Answer 3

您最初可以使用css

隐藏所有元素

.box {
  display:none;
}

另请注意，$("#country option:selected")将返回object，对象始终是真实的！检查长度！

示例：

＆＃13;
＆＃13;
if ($("#country option:selected").length) { $('#delivery' + $('#country option:selected').val()).show(); } else { $('.box').hide(); } $('#country').change(function() { $('.box').hide(); $('#delivery' + $(this).val()).show(); });
＆＃13;
.box { display: none; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="delivery-select one-whole text-center"> <form> <label for="country">Deliver to</label> <select id="country" name="country"> <option value="country1" name="country1" selected>United Kingdom</option> <option value="country2" name="country2">Jamaica</option> </select> </form> </div> <hr> <div class="rte"> <div id="deliverycountry1" class="box"> Delivering to the UK </div> <div id="deliverycountry2" class="box"> Delivering to Jamaica </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

您的查询的实施是：

$(document).ready(function(){
$('.box').hide();
var value = $("#country").val();
if(value)
{
	$('#delivery' +value).show();
}
else
{
	$('.box').hide();
}
})
$('#country').change(function() {
  $('.box').hide();
  $('#delivery' + $(this).val()).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="country">Deliver to</label>
    <select id="country" name="country">
      <!--<option value="0">Change</option>-->
      <option value="country1" name="country1" selected>United Kingdom</option>
      <option value="country2" name="country2">Jamaica</option>
    </select>

<div class="rte">
  <div id="deliverycountry1" class="box">
  Delivering to the UK
  </div>
  <div id="deliverycountry2" class="box">
  Delivering to Jamaica
  </div>

Answer 5

在JS部分完成更改请查看

$('#country').change(function() {
  $('.box').hide();
  $('#delivery' + $(this).val()).show();
});

$(document).ready(function() {

  if ($("#country option:selected")) {
    $('.box').hide();
    $('#delivery' + $('#country option:selected').val()).show();
  } else {
    $('.box').hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="delivery-select one-whole text-center">
  <form>
    <label for="country">Deliver to</label>
    <select id="country" name="country">
      <!--<option value="0">Change</option>-->
      <option value="country1" name="country1" selected>United Kingdom</option>
      <option value="country2" name="country2" >Jamaica</option>
    </select>
  </form>
</div>
<hr>
<div class="rte">
  <div id="deliverycountry1" class="box">
    Delivering to the UK
  </div>
  <div id="deliverycountry2" class="box">
    Delivering to Jamaica
  </div>
</div>

Answer 6

您需要先隐藏它们，所以只需在第一行添加$('.box').hide();。

$('.box').hide();
if ($("#country option:selected")){
$('#delivery' + $('#country option:selected').val()).show();
} else {
$('.box').hide();
}

$('#country').change(function() {
$('.box').hide();
$('#delivery' + $(this).val()).show();
});

https://jsfiddle.net/33xfzvg8/4/

检查是否在页面重新加载时选择了一个选项

6 个答案: