Question

我有一个下拉列表，它从专有系统获取数据，我们无法改变它在下拉列表中产生值的方式（我知道......很荒谬），所以我想使用一点点jquery和/或javascript让它更整洁。

对于初学者，重复每个选项中的文本。它应该只显示一个名称和一个键，但它显示的名称和键两次用短划线分隔，第二次出现在括号中，如下所示：

<select id="productKey">
    <option value="" selected="selected">Please make a selection</option>
    <option value="Text 1 | Key 1">Text 1 | Key 1 - (Text 1 | Key 1)</option>
    <option value="Text 2 | Key 2">Text 2 | Key 2 - (Text 2 | Key 2)</option>
    <option value="Text 3 | Key 3">Text 3 | Key 3 - (Text 3 | Key 3)</option>
    <option value="Text 4 | Key 4">Text 4 | Key 4 - (Text 4 | Key 4)</option>
    <option value="Text 5 | Key 5">Text 5 | Key 5 - (Text 5 | Key 5)</option>
    <option value="Text 6 | Key 6">Text 6 | Key 6 - (Text 6 | Key 6)</option>
    <option value="Text 7 | Key 7">Text 7 | Key 7 - (Text 7 | Key 7)</option>
</select>

我试图剥离选项 - 所以列表看起来像这样：

<select id="productKey">
    <option value="" selected="selected">Please make a selection</option>
    <option value="Text 1 | Key 1">Text 1 | Key 1</option>
    <option value="Text 2 | Key 2">Text 2 | Key 2</option>
    <option value="Text 3 | Key 3">Text 3 | Key 3</option>
    <option value="Text 4 | Key 4">Text 4 | Key 4</option>
    <option value="Text 5 | Key 5">Text 5 | Key 5</option>
    <option value="Text 6 | Key 6">Text 6 | Key 6</option>
    <option value="Text 7 | Key 7">Text 7 | Key 7</option>
</select>

我试过了：

var my_options = $("#productKey option");
    my_options.split("-");
$("#productKey").empty().append(my_options);

但得到my_options.split is not a function的错误。我猜测因为它是一个数组所以我需要循环选项，但现在确定如何。

Answer 1

循环选项，更改选项的text属性。见https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement

＆＃13;

$('select option').each(function(){
   this.text = this.text.split('-')[0];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="productKey">
    <option value="" selected="selected">Please make a selection</option>
    <option value="Text 1 | Key 1">Text 1 | Key 1 - (Text 1 | Key 1)</option>
    <option value="Text 2 | Key 2">Text 2 | Key 2 - (Text 2 | Key 2)</option>
    <option value="Text 3 | Key 3">Text 3 | Key 3 - (Text 3 | Key 3)</option>
    <option value="Text 4 | Key 4">Text 4 | Key 4 - (Text 4 | Key 4)</option>
    <option value="Text 5 | Key 5">Text 5 | Key 5 - (Text 5 | Key 5)</option>
    <option value="Text 6 | Key 6">Text 6 | Key 6 - (Text 6 | Key 6)</option>
    <option value="Text 7 | Key 7">Text 7 | Key 7 - (Text 7 | Key 7)</option>
</select>

＆＃13;

Answer 2

您可以将函数传递给jQuery的text()方法，并为每个匹配元素调用它。

抓取当前文字，删除短划线后的所有内容，然后将其退回。

＆＃13;

$('#productKey option').text(
  function() {
    // also removes any whitespace before the -
    return this.text.replace(/\s*-.*/, '');
  }
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="productKey">
  <option value="" selected="selected">Please make a selection</option>
  <option value="Text 1 | Key 1">Text 1 | Key 1 - (Text 1 | Key 1)</option>
  <option value="Text 2 | Key 2">Text 2 | Key 2 - (Text 2 | Key 2)</option>
  <option value="Text 3 | Key 3">Text 3 | Key 3 - (Text 3 | Key 3)</option>
  <option value="Text 4 | Key 4">Text 4 | Key 4 - (Text 4 | Key 4)</option>
  <option value="Text 5 | Key 5">Text 5 | Key 5 - (Text 5 | Key 5)</option>
  <option value="Text 6 | Key 6">Text 6 | Key 6 - (Text 6 | Key 6)</option>
  <option value="Text 7 | Key 7">Text 7 | Key 7 - (Text 7 | Key 7)</option>
</select>

＆＃13;

从下拉选项中删除破折号和任何文本

2 个答案: