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

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

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

 <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> 

它应该可以帮助您。

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

您可以订阅select的change事件，并根据select中的当前值执行详细信息显示：

$("#column_select").on("change", function () {
    var value = $(this).val();
    // logic based on selected value
});

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)
});