试图获取select标签中的选项值

时间:2016-01-05 06:02:52

标签: javascript jquery html drop-down-menu

我使用select标签创建货币菜单,我尝试做的是获取选择器的值,以便我可以将其转换为要使用的变量。我已经尝试了各种方法,这些方法也在堆栈上发布但我不断返回我的代码行而不是货币的值。

这是我的javascript。

function go(){
var sel = document.getElementById('userCurrency');
var userCurrency = sel.options[sel.selectedIndex].text;
}
var newP = $("<p>")
var userDate = ("#userDate")
var bitcoinApiUrl = "https://crossorigin.me/https://api.bitcoincharts.com/v1/markets.json";
$(document).ready(function(){
  $(".btn").on("click", function(){
    console.log(userCurrency)
    $.ajax({
      type: "GET",
      url: bitcoinApiUrl,
      dataType: "json",
      success: function(currency) {
        // loop through currency
        for (var i = 0; i < currency.length; i++) 
        {
          if(currency[i].currency == "USD")
          {
              var $tr = $("<tr />");
              $tr.append( $("<td />").text(currency[i].volume) );
              $tr.append( $("<td />").text(currency[i].latest_trade) );
              $tr.append( $("<td />").text(currency[i].bid) );
              $tr.append( $("<td />").text(currency[i].high) );

              $("#theTable tbody").append($tr);

          }
        }
      }
      });
    });
  });

我的HTML

<!-- currency select -->
<label class="">
    <span class="">Pick a currency</span>
      <select id="userCurrency" style="display: inline; width: auto; vertical-align: inherit;" onChange="go()">
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option>JPY</option>
    <option>GBP</option>
    <option>CHF</option>
    <option>CAD</option>
    <option>AUD</option>
    <option>MXN</option>
    <option>CNY</option>
    <option>NZD</option>
    <option>SEK</option>
    <option>RUB</option>
    <option>HKD</option>
    <option>NOK</option>
    <option>SGD</option>
    <option>TRY</option>
    <option>KRW</option>
    <option>ZAR</option>
    <option>BRL</option>
    <option>INR</option>
  </select>
</label>
<!-- select end -->

5 个答案:

答案 0 :(得分:1)

可以使用X完成此操作。

$('#selectId option:selected').text();

这是一个Fiddle

答案 1 :(得分:0)

你可以试试这个。

var e = document.getElementById("userCurrency");
var userCurrency = sel.options[sel.selectedIndex].text;

希望这会对你有所帮助。

答案 2 :(得分:0)

你必须改变。

DistributedObject

document.getElementById('userCurrency');

获取选择框的值。

答案 3 :(得分:0)

<强>的JavaScript

<script type="text/javascript">
  function changeEventHandler(event) {
    alert('You have selected ' + event.target.value);
  }
</script>

<强> HTML

    <label>Pickup a Currency: </label>
    <select size="1" onchange="changeEventHandler(event);">
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option>JPY</option>
        <option>GBP</option>
        <option>CHF</option>
        <option>CAD</option>
        <option>AUD</option>
        <option>MXN</option>
        <option>CNY</option>
        <option>NZD</option>
        <option>SEK</option>
        <option>RUB</option>
        <option>HKD</option>
        <option>NOK</option>
        <option>SGD</option>
        <option>TRY</option>
        <option>KRW</option>
        <option>ZAR</option>
        <option>BRL</option>
        <option>INR</option>
    </select>

答案 4 :(得分:0)

由于您将userCurrency声明为函数go()的局部变量,因此它在$ ajax回调中不可用。

$(document).ready(function(){
    var userCurrency;

    $("#userCurrency").change(function(){
        userCurrency = $("#userCurrency option:selected").text();
        console.log(userCurrency);
    });

    //continue $ajax call here
    //var newP = $("<p>");
})