[英]Show Value Instead of text in select option
I have country codes dropdown list, in select option text there countryname and ISD Code together, but I want only show ISD Code after Selection. 我有国家代码下拉列表,在选择选项文本中同时有国家名称和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>
I have searched for some other forums but I am not able to get how to do this. 我已经搜索了其他一些论坛,但无法获得如何执行此操作的信息。 like if we select Anguilla, then it should show +1 there and if it is selected Angola, it should show +244 就像我们选择安圭拉,那么那里应该显示+1,如果选择安哥拉,那么应该显示+244
A solution with only a <select>
element. 仅包含<select>
元素的解决方案。
How it works: 这个怎么运作:
<option>
that will be used for showing the selected option's value. 初始化一个隐藏的<option>
,该<option>
将用于显示所选选项的值。 value
attribute and text content the value
attribute of the just selected option if this value is not empty . 如果此值不为 null,则影响隐藏选项的value
属性和文本内容刚刚选择的选项的value
属性。 Then shows that hidden option. 然后显示该隐藏选项。 value
and text content of that option, then hides it, if the chosen value is empty ( Country code
option here) . 清空该选项的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>
You can handle change event of select tag like this. 您可以像这样处理选择标签的更改事件。
I updated code for display selected value as selected text. 我更新了将所选值显示为所选文本的代码。
$("#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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.