Question

我有一个下拉列表，其中显示如下项目：

1 Apple
2香蕉
3芒果
4橙色

现在，当我选择任何选项时，我只想显示数字而不是整个项目文本。即当我选择“1 Apple”时，我只想显示“1”。我如何实现这一目标？

我尝试使用

更改文字

 $("#ddlFruits option:selected").text($("#ddlFruits option:selected").text().split(' ')[0])

但这也会更改下拉列表中的项目。

Answer 1

如果您只想在选择选项时显示数字，但在进行更改时保留数字和文字，请使用更改和mousedown事件组合

＆＃13;

$('select').change(function() {
  option = $(this).val().split(' ')
  $('option:selected', this).data('orig', $(this).val()).html(option[0])
}).mousedown(function() {
  $('select option').each(function() {
   $(this).html($(this).data('orig'))
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>1 Apple </option>
  <option>2 Banana</option>
  <option>3 Mango</option>
  <option>4 Orange</option>
</select>

＆＃13;

Answer 2

select - 元素具有selectedIndex - 属性，您可以在change - 事件中使用该属性来获取所选选项并操纵其值或innerHTML。

Answer 3

首先，您需要知道选择的值已更改，在这种情况下，您将获得选择了哪个选项的信息。

然后必须发生两件事：首先你需要确保所有选项都返回到原始状态（显示完整标签的位置），这是因为你要修改这些标签。其次，您只需选择其值的第一部分即可继续更新所选选项的标签（我选择值只是为了方便，但它很可能是选项的文本或外部源）。

请注意，为了正确分割选项的值，我必须将空格作为参数传递给分割函数。

$(function() {
  $("#ddlFruits").on('change', function() {
    var $selected = $('option:selected', this);
        $notSelected = $('option:not(:selected)', this);
        
        $notSelected.each(function(i, option) {
          $(option).text( $(option).val() );
        });
        $selected.text( $selected.val().split(' ')[0] );

  })  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ddlFruits" id="ddlFruits">
  <option value="1 Apple">1 Apple</option>
  <option value="2 Banana">2 Banana</option>
  <option value="3 Mango">3 Mango</option>
</select>

是否可以在下拉列表中更改所选项目的文本？

3 个答案: