Question

我有一个选择下拉列表

   <select id="select_domain">
   <option value="1">Jon Doe</option>
   <option value="2">Max Mustermann</option>
   </select>

跨度

<span id="domain"></span>

在此范围内，应该有我选择菜单中所选选项的文本。

我如何用jQuery做到这一点？

Answer 1

可能这是你所期望的：

 $("#select_domain").on("change", function() {
   $("#domain").text($("#select_domain option:selected").text());
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_domain">
  <option value="1">Jon Doe</option>
  <option value="2">Max Mustermann</option>
</select>
<span id="domain"></span>

Answer 2

请检查此答案，

$(function() {
    $('#select_domain').change(function(){
        $("#domain").text($("#select_domain option:selected").text());
    });
});

Answer 3

您可以用来获取文字：

$("#select_domain option:selected").text();

并获取值：

$("#select_domain").val()

JSFiddle：http://jsfiddle.net/ghorg12110/eqd22pca/1/

Answer 4

＆＃34;当＆＃34;有点重要，但如果您希望在选择新值时更新跨度，请使用以下内容：

    $( "#select_domain" ).change(function() {
       $('#domain').html($('select_domain').val());
    });

如果您希望在加载范围内显示默认值，可以使用服务器端代码执行此操作，或将此行添加到通用函数中：

    $('#domain').html($('select_domain').val());

Answer 5

以下是一个解释的示例，以及在页面加载时触发事件的额外效果。

/*Binds a change event to your select*/
$('#select_domain').change(function () {
    /*sets the text to the selected option of THIS select box*/
    set_text($('option:selected', this).text());
});
/*Creates a function to set the text of domain
This function can be used elsewhere as well*/
function set_text(text){
    $('#domain').text(text);
}

/*This triggers the function and sets the text 
to the currently selected text on page load*/
set_text($('#select_domain option:selected').text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_domain">
    <option value="1">Jon Doe</option>
    <option value="2">Max Mustermann</option>
</select>
<span id="domain"></span>

跨度内选择菜单的文本

5 个答案: