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

Posted 2023-05-09

【中文标题】JQuery 根据另一个字段的值替换选择选项标签

【英文标题】：JQuery replace select option label based on another field's value

【发布时间】：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>

任何想法我做错了什么？

【参考方案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>");

        
);