Question

我想从下拉框中获取所选值。然后我想用这个值来改变背景图像。

我认为这两个代码snippits非常有用：

document.observe("dom:loaded",function(){
initialize();

addTextboxes();
var sel = document.getElementById("select");
for(i = 0; i < pieces.length; i++) {
    pieces[i].observe("click",function(event){
        moveThis(event.toElement.innerHTML-1);
    });
    pieces[i].style.backgroundImage = sel.value;        
}

var e = document.getElementById("select");
alert(e.options[e.selectedIndex].value);

var value = document.getElementById("select").value;
alert(value);

});

function addTextboxes(){
var sel = document.createElement("select");
//Add the options  
sel.options[sel.options.length] = new Option("text0","url(luigi1.jpg)");  
sel.options[sel.options.length] = new Option("text1","url(luigi2.jpg)");  
sel.options[sel.options.length] = new Option("text2","url(luigi3.jpg)");  
sel.options[sel.options.length] = new Option("text3","url(luigi4.jpg)");  
//add the element to the form  
document.getElementById("overall").appendChild(sel);    
}

我已经在其中添加了两个警报来测试是否有事情发生，但它们甚至都没有出现。此外，当我将forloop放在addTextboxes（）函数中时，它会将背景更改为第一个选定的选项，但在更改框时不会更改。

Answer 1

我在代码中看到了一些需要更改的内容。

如果不给元素选择ID，则无法使用getElementById("select")。 ID与标签类型不同，并且在整个页面中必须是唯一的。在下面的小提琴中，我使用'mySelect'来避免混淆。
您不应该在每个选项上收听click事件。相反，您应该在整个select元素上侦听change事件。更改后，select元素的value将是所选选项的值。

这是fiddle这些更改

进行这些更改后，所选选项的值现在会显示在警告框中。从这里，您可以更改背景图像，或执行其他任何操作。

Answer 2

使用jQuery，这里只是这一行

$( "#selectbox option:selected" ).text();

这将获得所选选项的文本，您始终可以使用此方法获取值：

$( "#selectbox option:selected" ).val();

javascript得到下拉框值

2 个答案: