正在尝试获取select标记中选项的值

Trying to get value of the options in select tag

本文关键字：选项 select 获取      更新时间：2023-09-26

我正在使用一个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 -->

这可以通过使用$('#selectId option:selected').text();来完成。

$(document).ready(function(){
$(".btn").on("click", function(){
var userCurrency = $('#userCurrency option:selected').text();
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);
      }
    }
  }
  });
});
});

这是一个相同的Fiddle。

您必须更改。

document.getElementById('userCurrency');

至

document.getElementById('userCurrency').value;

以获取选择框的值。

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>

由于您将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>");
})

你可以试试这个。

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

希望这对你有帮助。

相关文章：