Question

我试图从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/

谢谢！

Answer 1

您必须找到所选的选项，如：

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

Answer 2

属性位于option而非select，更改处理程序中的this为select。
您可以使用.find获取所选选项

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

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

2 个答案: