Question

我有一个下拉列表

<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>

单击选项时，我想在同一页面中显示特定选项的详细信息。

如何使用jquery实现？

Answer 1

＆＃13;

function showval(value) 
{
  
  var text = $("#column_select option:selected").text();
  
  var string = "Value is: "+value+" and Text is: "+text;
  
  $("#showvalue").html(string);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showvalue">
</div>


<select name="column_select" id="column_select" onchange="showval(this.value);">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>

＆＃13;

它可以帮助你。

Answer 2

使用此jquery

<强> jquery的

$('select.column_select').on('change', function(){
  var selectVal = $(this).val();
  if(selectVal==col1){
    // do something
  };
  if(selectVal==col2){
    // do something
  };
  if(selectVal==col3){
    // do something
  };
});

Answer 3

您可以订阅选择的更改事件，并根据选择中的当前值显示详细信息：

date.forEach(function(d) {
    d = d.substring(0, 10);
})

Answer 4

试试这个......

$(document).on('change','#column_select',function() {
   // Code to write it anywhere on page. 
   // If you want it to write on `span#spnDisplay` then use this
   var selText = $('#column_select option:selected').text();
   $('#spnDisplay').text(selText)
});

显示与下拉选项相关的数据

4 个答案: