如何从选择选项中获取结果？答案

【问题标题】：How to get result from select option?如何从选择选项中获取结果？
【发布时间】：2015-03-27 12:32:16
【问题描述】：

我想做一个选择选项，每个选项在 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>');
});

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

谢谢

【问题讨论】：

您的代码应该可以工作。但是，您的mydiv 在哪里？只需使用var selectedCountry = $(this).val();$('#mydiv').prepend('<h2>' +selectedCountry +'</h2>');
你遇到了什么错误？
你的 html 中没有 mydiv，所以它不会做任何事情
.val() 将只返回数字1、2、3 之一。如果您想要国家/地区的名称，请使用.text()。

标签： jquery html forms select

【解决方案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();
});

如果我不在基地，请告诉我。希望这会有所帮助！

【讨论】：

您好，感谢您的回复.. 关闭.. 每个国家/地区都有不同的文字和图像。所以，当我更改为 uk 时，我想显示 uk 相关的文本或 div 。默认情况下，它可能是 display none 。我想要类似的结果：nimb.ws/luTJca 谢谢
这个怎么样？更新了代码和演示。也许这更近了？
没问题。随时:)
嗨，wrxsti .. 我怎样才能做出另一个选择。喜欢：选择大陆，然后，将显示，选择国家，，其余的都是一样的..你能帮帮我吗..谢谢提前..

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：