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);
});

Answer 2

使用jQuery：http://jsfiddle.net/V89ZC/2/

button.onclick = function () {
    var str = '<iframe src="' + link +
        '" width="' + $("#width").val() + $('#widthType option:selected').text() +
        '" height="' + $("#height").val() + $('#heightType option:selected').text() +
        '" frameborder="0" scrolling="auto"></iframe>';
    $("#embeddedCode").val(str);
};

Javascript拒绝获取“select”元素的选定值的值

2 个答案: