首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用jQuery隐藏所选选项的某些文本值

如何使用jQuery隐藏所选选项的某些文本值
EN

Stack Overflow用户
提问于 2020-10-09 00:04:44
回答 2查看 72关注 0票数 0

我有一个包含某些元素的选择框(如下所示):

代码语言:javascript
复制
    <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中实现它?

谢谢你,凯文

EN

回答 2

Stack Overflow用户

发布于 2020-10-09 00:44:14

一种强制执行的方法是跟踪当前选定选项的内部文本和值,然后在选项更改时将文本替换为所需的文本。这一部分在您的情况下很简单,因为所需的输出文本与选项的值相同。

我选择在开始时添加一个空白选项,因为默认情况下文本不会更改,但您可以通过添加一个触发器来绕过这个问题,在页面加载完成时触发。

代码语言:javascript
复制
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);
});
代码语言:javascript
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2020-10-09 02:48:07

我找到了一个解决方案:

下面是我是如何做到的:

代码语言:javascript
复制
        $('select[name="test"]').find('option').remove().end();
        $('select[name="test"]').append(new Option(selectId, selectId));
        $('select[name="test"]').trigger('change');
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64266414

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档