JavaScript 拒绝获取 "select"元素的选定值

Question

预先感谢您的帮助!我对 JS 比较陌生，我正在尝试根据选定的宽度和高度构建一个“iframe 生成器”。我的大部分脚本都在工作，但是当尝试获取下拉列表的选定选项时，我的脚本仅返回第一个选项值。

我对这个主题做了相当多的研究，并找到了很多答案，但似乎没有一个对我有用。您可能会注意到我的脚本已成为 JS 和 Jquery 的合并，因为我尝试合并不同的方法来使其工作。我确信这是我自己的一些语法错误或类似的错误。

我做错了什么？

var button = document.getElementById('getCode');
var link = "https://www.google.com";
var width = document.getElementById('width');
var widthType = document.getElementById('widthType');
var widthText = widthType.options[widthType.selectedIndex].text;
var height = document.getElementById('height');
var heightType = document.getElementById('heightType');
var heightText = heightType.options[heightType.selectedIndex].text;

button.onclick = function () {
    var str = '<iframe src="' + link +
        '" width="' + width.value + widthText +
        '" height="' + height.value + heightText +
        '" frameborder="0" scrolling="auto"></iframe>';
    $("#embeddedCode").val(str);
};

http://jsfiddle.net/DaddyWarbucks/V89ZC/1/

非常感谢任何帮助!

Answer 1

尝试

var link = "https://www.google.com";
//use jQuery event handler
$('#getCode').click(function () {
    //you need to read the selected values & text within the click handler otherwise the variables will always have the intial value, it will not get updated when user changes the selection
    var str = '<iframe src="' + link +
        '" width="' + $('#width').val() + $('#widthType option:selected').text() +
        '" height="' + $('#height').val().value + $('#heightType option:selected').text() +
        '" frameborder="0" scrolling="auto"></iframe>';
    $("#embeddedCode").val(str);
});