阅读select2版本4下拉列表选择文本的正确方法是什么？

5 回答

• 6

  Basicall$
  
  console.log("#select2 option:selected").text()
  

  回复于 2024-04-29T23:23:33+08:00
• 15

  只需使用此答案的详细信息：How to get Selected Text from select2 when using <input>

  像这样：

  $(function() { 
      // Initialise
      $('.example-basic-single').select2();
      $('.example-basic-multiple').select2();
  
      // Retrieve default selected value
      var defaultSelection = $('.example-basic-single').select2('data');
      $("#selectedS").text(defaultSelection[0].text);
  
      // Single select capture
      $('.example-basic-single').on("select2:select", function (e) { 
         var data = $(this).select2('data');
         $("#selectedS").text(data[0].text);
      });
  
      $('.example-basic-multiple').on("select2:select", function (e) { 
         var data = $(this).select2('data');
         var selectedText = $.map(data, function(selected, i) {
                                return selected.text;
                            }).join();
         $("#selectedM").text(selectedText);
      });
      $('.example-basic-multiple').on("select2:unselect", function (e) { 
         var data = $(this).select2('data');
         var selectedText = $.map(data, function(selected, i) {
                                return selected.text;
                            }).join();
         $("#selectedM").text(selectedText);
      });
  
  });
  

  .demo 
  { 
    margin: 10px;
  }
  .labelS, .labelM
  {
    margin-top: 5px;
  }
  .selection
  { 
    margin-top: 5px;
  }
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://select2.github.io/dist/js/select2.full.js"></script>
  <link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
  
  <div class="container">
  	<div class="row">
  		<div class="col-xs-4">
  			<div class="selection">Single select:</div>
  			<select class="example-basic-single form-control">
  				<option value="1">One</option>
  				<option value="2">Two</option>  
  				<option value="3">Three</option>
  			</select>
  			<div class="labelS">Selected:</div>
  			<div id="selectedS"></div>
  		</div>
  		<div class="col-xs-4">  
  			<div class="selection">Multiple Select:</div>
  			<select class="example-basic-multiple form-control" multiple="multiple">
  				<option value="1">One</option>
  				<option value="2">Two</option>  
  				<option value="3">Three</option>
  				<option value="4">Four</option>
  				<option value="5">Five</option>
  			</select>
  			<div class="labelM">Selected:</div>
  			<div id="selectedM"></div>
  		</div>
  	</div>
  </div>
  

  回复于 2024-04-29T23:23:33+08:00
• 4

  您可以使用jquery option:selected 获取 select2 选择 value 并获取 .text() .

  HTML

  <select id="select2">
      <option value="1">Pizza</option>
      <option value="1">Hamburger</option>
      <option value="1">Salad</option>
      <option value="1">Gyro Wrap</option>
  </select>
  

  jQuery

  $('#select2').select2();
  $('#select2').on('change', function(){
      alert($("#select2 option:selected").text()) 
  });
  

  你可以结账http://jsfiddle.net/tu9h5zu8/1/

  回复于 2024-04-29T23:23:33+08:00
• 0

  我不认为select2有一个更改回调函数，但你可以将它附加到select elemet .

  http://jsfiddle.net/tu9h5zu8/

  $('select').select2();
  $('select').on('change', function(){
      alert($(this).find('option:selected').text()) 
  });
  

  回复于 2024-04-29T23:23:33+08:00
• 4

  通过当前选择的选项值，您可以在jquery中获得这样的选项文本 .

  $('select').on('change', function(){
          alert($("option[value='"+$(this).val()+"']"),$(this)).text());
      });
  

  回复于 2024-04-29T23:23:33+08:00