CODEWITHSUNDEEP
jqueryformsselectinput
EnterateNorte
EnterateNorte

Reputation: 173

Getting 2 separate values from options in a SELECT using jQuery

Im trying to get two values from a OPTION in a SELECT input...

Here is what I got:

jQuery:

$(document).ready(function() { 
$( "#embed-layout-options" ).change(function () {
            var widthval = $(this).attr('data-width');
            var heightval = $(this).attr('data-height');
            var urlcode = "<iframe src='http://videos.enteratenorte.com/embed/"+widthval+"-"+heightval+"/6NExpBjXme' width='"+widthval+"' height='"+heightval+"' frameborder=0 webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
            $("#codeemb").val(urlcode);
})
});

HTML:

<input type="text" id="codeemb" style="font-size:18px; width:710px" value="<iframe src='http://videos.enteratenorte.com/embed/720-405/6NExpBjXme' width='720' height='405' frameborder=0 webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>">

Size:<select id="embed-layout-options"> 
    <option value="0" data-width="560" data-height="315">560 × 315</option>
    <option value="1" data-width="640" data-height="360">640 × 360</option>
    <option value="2" data-width="720" data-height="405" selected="selected">720 × 405</option>
    <option value="3" data-width="853" data-height="480">853 × 480</option>
    <option value="4" data-width="1280" data-height="720">1280 × 720</option>
</select>

It does change, but instead of a number, i get undefined

You can test it here: http://jsfiddle.net/EnterateNorte/foc085jc/

Thanks!

Upvotes: 2

Views: 179

Answers (2)

Musa
Musa

Reputation: 97707

The attributes are on the options not the select, this in the change handler is the select.
You can use .find to get the selected option

var widthval = $(this).find(":selected").attr('data-width'); 
var heightval = $(this).find(":selected").attr('data-height');

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

You have to find selected option like:

$(document).ready(function() {
  $("#embed-layout-options").change(function() {
    var widthval = $(":selected", this).attr('data-width');//here get selected option
    var heightval = $(":selected", this).attr('data-height');//here get selected option
    var urlcode = "<iframe src='http://videos.enteratenorte.com/embed/" + widthval + "-" + heightval + "/6NExpBjXme' width='" + widthval + "' height='" + heightval + "' frameborder=0 webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
    $("#codeemb").val(urlcode);
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="codeemb" style="width:710px" value="<iframe src='http://videos.enteratenorte.com/embed/720-405/6NExpBjXme' width='720' height='405' frameborder=0 webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>">

<br>
<br>
<br>Size:

<select id="embed-layout-options">
  <option value="0" data-width="560" data-height="315">560 × 315</option>
  <option value="1" data-width="640" data-height="360">640 × 360</option>
  <option value="2" data-width="720" data-height="405" selected="selected">720 × 405</option>
  <option value="3" data-width="853" data-height="480">853 × 480</option>
  <option value="4" data-width="1280" data-height="720">1280 × 720</option>
</select>

You can use also .find():

var widthval = $(this).find(":selected").attr('data-width');

References

:selected

Upvotes: 4

Related Questions