javascript获取下拉框值

Question

我想从下拉框中获取选定的值。 然后我想使用该值来改变背景图像。

我认为这两个代码片段很有用：

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与代码类型不同，并且在整个页面中ID必须唯一。 在下面的小提琴中，我为此使用“ mySelect”，以避免造成混淆。

• 您不应该在每个选项上监听click事件。 相反，您应该在整个select元素上侦听change事件。 的变化后，将value选择元件的将被选择的是选项的值。

这些变化是摆弄

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

Answer 2

通过使用jQuery，这里的这一行很简单

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

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

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