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

谢谢!

最佳答案

您必须找到选定的选项,例如:



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

关于jquery - 使用jQuery从SELECT中的选项获取2个单独的值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26684399/

10-12 01:17
查看更多