CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
Villainy
Villainy

Reputation: 125

Trying to get value of the options in select tag

I'm using a select tag to create a currency menu , what I'm trying to do is get the value of the selector so i can turn it into a variable to use. I already tried various methods that were also posted on stack but I keep getting returned my line of code instead of the value of the currency.

this is my 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);

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

my 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 -->

Upvotes: 0

Views: 272

Answers (5)

shiva chauhan
shiva chauhan

Reputation: 420

You can try this.

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

Hope this will help you.

Upvotes: 0

nhd
nhd

Reputation: 141

Since you are declaring userCurrency as a local variable of function go(), it will not be available in the $ajax callback.

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

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

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

Upvotes: 0

Atlas_Gondal
Atlas_Gondal

Reputation: 2552

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>

Upvotes: 0

Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

This can be done by using $('#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);

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

Here is a Fiddle for the same.

Upvotes: 1

Priya Rajaram
Priya Rajaram

Reputation: 360

you have to change. 

document.getElementById('userCurrency');

to 

document.getElementById('userCurrency').value;

to get the value of select box.

Upvotes: 0

Related Questions