使用 jQuery 从 SELECT 中的选项中获取 2 个单独的值答案

【问题标题】：Getting 2 separate values from options in a SELECT using jQuery使用 jQuery 从 SELECT 中的选项中获取 2 个单独的值
【发布时间】：2014-12-28 08:20:43
【问题描述】：

我试图从 SELECT 输入中的 OPTION 中获取两个值...

这是我得到的：

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>

它确实发生了变化，但不是数字，而是未定义

你可以在这里测试它： http://jsfiddle.net/EnterateNorte/foc085jc/

谢谢！

【问题讨论】：

标签： jquery forms select input

【解决方案1】：

属性在options 上而不是select，更改处理程序中的this 是select。
您可以使用.find 获取选中的选项

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

【讨论】：

【解决方案2】：

您必须找到选定的选项，例如：

$(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>

你也可以使用.find():

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

参考文献

:selected

【讨论】：