JQuery 根据另一个字段的值替换选择选项标签答案

【问题标题】：JQuery replace select option label based on another field's valueJQuery 根据另一个字段的值替换选择选项标签
【发布时间】：2019-12-27 07:00:43
【问题描述】：

我有两个选择字段 - wpvcountry 和 wpvregion。

如果 wpvcountry 选择了选项 1（即值为 0），我想将 wpvregion 的选项 1 的标签替换为文本 请先选择一个国家

到目前为止，这是我的代码：

if ( $('select[name="wpvcountry"]').val() == 0 ) {

    $('select[name="wpvregion"]').val(0).text('Please select a country first');

}

这目前只是覆盖所有选择选项，导致：

<select name="wpvregion" class="form-control">Please select a country first</select>

任何想法我做错了什么？

【问题讨论】：

标签： jquery

【解决方案1】：

好的，首先我会向您投诉您的代码是如何工作的

$('select[name="wpvregion"]').val(0).text('Please select a country first');

$('select[name="wpvregion"]') - 将获得 <select name="wpvregion"> 元素

当调用.val(0) 将使<select> 选择值0 或平均选项将选择<option value="0"> 但不会得到<option value="0"> 元素

调用.text('Please select a country first') 会将<select>...</select> 中的新文本设置为<select>Please select a country first</select> 而不是<option>，因为元素仍然是<select>

顺便说一句如果你需要设置<option value="0">你需要打电话

$('select[name="wpvregion"]')
    .children('option[value ="0"]') //--> will get option value "0" element 
    .text('Please select a country first');

或

$('select[name="wpvregion"] option[value ="0"]') //--> will get option value "0" element 
    .text('Please select a country first');

这里是演示...

countryCheck();
$('select[name="wpvcountry"]').on('change', function() {
  countryCheck();
});

function countryCheck(){
  if ($('select[name="wpvcountry"]').val() == "0") {
    $('select[name="wpvregion"]').val('0');
    $('select[name="wpvregion"] option[value ="0"]')
      .text('Please select a country first');
    $('select[name="wpvregion"] option').hide();
  } else {
    $('select[name="wpvregion"] option[value ="0"]')
      .text('-');
    $('select[name="wpvregion"] option').show();
    //country = $('select[name="wpvcountry"]').val();
    //getRegion(country);        -->Get country region here
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="wpvcountry">
  <option value="0">-----</option>
  <option value="US">United State</option>
  <option value="UK">United Kingdom</option>
  <option value="JP">Japan</option>
</select>
<select name="wpvregion">
  <option value="0">-</option>
  <option value="Loading" disabled>Loading...</option>
</select>

【讨论】：

【解决方案2】：

试试这个：

<select name="wpvcountry" class="form-control">
    <option value=0></option>
    <option value=1>A</option>
    <option value=2>B</option>
    <option value=3>C</option>
</select>

<select name="wpvregion" class="form-control"></select>

在您的脚本部分：

var val = $('select[name="wpvcountry"]').val();
if (val == 0) {
   $('select[name="wpvregion"]').html('<option value=0>Please select a country first</option>');
}

【讨论】：

【解决方案3】：

我猜你想要这个

$('select[name="wpvcountry"]').change(function(){

        if ( $(this).val() == '0' ) {

           $('select[name="wpvregion"]').prepend("<option value='0'>Please select a country first</option>");

        }
});

【讨论】：