Question

我有国家（地区）代码下拉列表，在选择选项文本中同时有国家（地区）名称和ISD代码，但我只希望在选择后显示ISD代码。

<select class="form-control-input" name="country_isd_code" id="country_isd_code">
  <option value="">Country Code</option>
  <option value="+244">Angola (+244)</option>
  <option value="+1">Anguilla (+1)</option>
</select>

我已经搜索了其他一些论坛，但无法获得如何执行此操作的信息。例如，如果我们选择安圭拉，那么那里应该显示+1，如果选择安哥拉，那么应该显示+244

Answer 1

仅包含<select>元素的解决方案。

工作原理：

初始化一个隐藏的<option>，该value用于显示所选选项的值。
选择一个选项时：
- 影响隐藏选项的value属性，文本内容影响刚刚选择的选项的value属性，如果该值不为空。然后显示该隐藏选项。
- 清空该选项的Country code和文本内容，然后将其隐藏，如果所选值是空的（此处为document.addEventListener('DOMContentLoaded', () => { const select = document.querySelector('select'); select.addEventListener('change', () => { const value = select.value, showValueOption = select.querySelector('.show-value'); if (value === '') { showValueOption.style.display = 'none'; showValueOption.value = ''; return; } showValueOption.style.display = ''; showValueOption.innerText = value; showValueOption.value = value; select.selectedIndex = 0; }); });选项）。

<select class="form-control-input" name="country_isd_code" id="country_isd_code">
  <option class="show-value" value="" style="display:none;"></option>
  <option value="" selected>Country Code</option>
  <option value="+244">Angola (+244)</option>
  <option value="+1">Anguilla (+1)</option>
</select>

struct ModelName{
var name: String
var rectangle: Bool
}

Answer 2

您可以像这样处理选择标签的更改事件。

我更新了将所选值显示为所选文本的代码。

$("#country_isd_code").change(function(){
  $("#codeselect").val($(this).val());
})

$("#country_isd_code").change(function(){
  $("#codeselect").val($(this).val());
  //$("#country_isd_code option:selected").text($(this).val());
 
  $("#selecteditem").val($(this).val())
  $("#selecteditem").text($(this).val())
   $("#selecteditem").prop('selected', true);
   $("#selecteditem").show();
})

#selecteditem{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control-input" name="country_isd_code" id="country_isd_code">
    <option id="selecteditem" value=""></option>
    <option value="">Country Code</option>                                                                                                                             
   <option value="+244">Angola (+244)</option>
    <option value="+1">Anguilla (+1)</option>
    </select>
   
   <input type="text" id="codeselect" />

在选择选项中显示值而不是文本

2 个答案: