我有一个包含某些元素的选择框(如下所示):
<select id="test" name="test">
<option value="12345">12345 - Test</option>
<option value="67890">67890 - Test 2</option>
<option value="53453">53453 - Test 3</option>
</select>当用户选择某个元素时,我想要隐藏文本的某些元素,这是我试图实现的。例如,如果我选择12345,我希望隐藏- Test。
我如何在jQuery中实现它?
谢谢你,凯文
发布于 2020-10-09 00:44:14
一种强制执行的方法是跟踪当前选定选项的内部文本和值,然后在选项更改时将文本替换为所需的文本。这一部分在您的情况下很简单,因为所需的输出文本与选项的值相同。
我选择在开始时添加一个空白选项,因为默认情况下文本不会更改,但您可以通过添加一个触发器来绕过这个问题,在页面加载完成时触发。
var selectedTextOrig = "";
var selectedValue = 0;
$("#test").change(function() {
// Reset the inner html text for the previously-selected option
$("#test option").each(function() {
if ($(this).val() == selectedValue) {
$(this).text(selectedTextOrig);
return false; // break out of $.each()
}
});
// Store the viewable text and value of the currently selected
selectedValue = $("#test option:selected").val();
selectedTextOrig = $("#test option:selected").text();
// Replace the current inner html
$("#test option:selected").text(selectedValue);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test" name="test">
<option disabled="disabled" selected></option>
<option value="12345">12345 - Test</option>
<option value="67890">67890 - Test 2</option>
<option value="53453">53453 - Test 3</option>
</select>
发布于 2020-10-09 02:48:07
我找到了一个解决方案:
下面是我是如何做到的:
$('select[name="test"]').find('option').remove().end();
$('select[name="test"]').append(new Option(selectId, selectId));
$('select[name="test"]').trigger('change');https://stackoverflow.com/questions/64266414
复制相似问题