Question

我有一个选项下拉列表（<select>）供用户选择。我需要制作一个jQuery解决方案，将所选选项转换为简单文本。

实施例。清单：

<select>
<option>Oranges</option>
<option>Apples</option>
<option>Bananas</option>
</select>

用户选择＆＃34;苹果＆＃34;。用户单击页面上的特殊按钮后，jQuery将使用静态文本替换整个列表：

Apples

那么，如何获取所选选项的值并用它替换整个<select>列表？

Answer 1

使用replaceWith()

$('select').change(function() {
  $(this).replaceWith($(':selected').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select>
  <option>Oranges</option>
  <option>Apples</option>
  <option>Bananas</option>
</select>

Answer 2

尝试这样的事情：

Try this

<div id="yo">
  <select>
    <option>Oranges</option>
    <option>Apples</option>
    <option>Bananas</option>
  </select>   
</div>

$(function(){

    $div = $('#yo')

    $div.find('select').change(function(){

        $div.html($(this).val());
    });
});

Answer 3

您可以使用replaceWith

$(function() {
    $(".selectField").on("change", function() {
        $(this).replaceWith($(this).val());
    });
});

Fiddle

jQuery - 将选定的<option>转换为简单文本

3 个答案: