如何从 select 选项中获取结果？

Question

我想制作一个 select 选项，其中每个选项在 div 上显示不同的 html 文本。

<form>
    <label>Select Country:</label>
    <select class="country">
        <option value="1">United States</option>
        <option value="2">India</option>
        <option value="3">United Kingdom</option>
    </select>
</form>

和jquery.

$("select.country").change(function(){
    var selectedCountry = $(".country option:selected").val();
   // alert("You have selected the country - " + selectedCountry);
    $('#mydiv').prepend('<h2> option one </h2>');
});

我怎样才能做到这一点。任何的想法。

谢谢

Answer 1

如果我对你的问题的理解正确，那么这样的事情应该对你有用：DEMO

HTML

<form>
    <label>Select Country:</label>
    <select class="country">
        <option disabled>Please select a country</option>
        <option value="us">United States</option>
        <option value="india">India</option>
        <option value="uk">United Kingdom</option>
    </select>
</form>
<div id="uk" class="countryOption"><img src="http://upload.wikimedia.org/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg" /><br />Text about the UK</div>
<div id="us" class="countryOption"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/US_flag_48_stars.svg/220px-US_flag_48_stars.svg.png" /><br />Text about the US </div>
<div id="india" class="countryOption"><img src="http://upload.wikimedia.org/wikip1/Flag_of_India.svg/225px-Flag_of_India.svg.png" /><br />Text about India</div>

jQuery

$("select.country").change(function(){
    var selectedCountry = $(this).val();
    $('.countryOption').hide()
    $('#' + selectedCountry).show();
});

如果我在这里偏离基地，请告诉我。希望这对您有所帮助！

Answer 2

$(".country").change(function(){
       var selectedCountry = $(".country").val();
        var text = $('.country option:selected').text();
        var text1='You have selected:';
   if( selectedCountry > 0 ){
      
  $('#mydiv').html(text1+text );
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
  <select class="country">
    <option>Please Select </option>
    <option value="1">India </option>
    <option value="2">UK </option>
    <option value="3">Canada </option>
    <option value="4">Iran </option>
  </select>
  <div id="mydiv"> </div>
  </html>

Answer 3

试试这个

 
function getval(){

   var selectedCountry = $('select[name=selector] option:selected').text();
    alert("You have selected the country - " + selectedCountry);
    $('#mydiv').prepend('<h2> option one </h2>');

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <label>Select Country:</label>
    <select class="country" onChange="getval();" name='selector'>
        <option value="1">United States</option>
        <option value="2">India</option>
        <option value="3">United Kingdom</option>
    </select>
</form>

如何从 select 选项中获取结果？

How to get result from select option?

html

forms

jquery

select