充分利用使用jQuery

在選擇選項2個獨立的價值觀

我試着從一個SELECT輸入一個選項得到兩個值...充分利用使用jQuery

這裏是我的了：

的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/

謝謝！

來源

2014-10-31 EnterateNorte

你必須找到喜歡選擇的選項：

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

來源

2014-10-31 22:38:25

屬性是對option不是在select，this的變化處理程序是select。
您可以使用.find獲得選定的選項

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

來源

2014-10-31 22:41:41 Musa

充分利用使用jQuery

回答

相關問題