Question

我的javascript技能不是最好的，但我最近一直在研究它们，我想做的一件事就是为html选项标签设置属性。我在jfiddle上发布了这个项目，让它更容易看到。你可以看到here。我想我只是一行代码或其他东西。

如何从选项2中删除所选属性并为选项1创建所选属性？换句话说，当我打开'another-popup'时，选择选项1而不是选项2.

我建议你查看jsFiddle链接，但我也在这个问题上发布了代码。更新链接的javascript：

function updateSelected(id, removeID, parentID) {
    document.getElementById(parentID).style.display = 'none';
    document.getElementById(id).setAttribute("selected","selected");
    document.getElementById(removeID).removeAttribute("selected")
}

html：

<a href="#box" rel="popup">Popup</a>

<div id="box" class="popup">
<a href="#another-box" rel="popup" onClick="updateSelected("1", "2", "box");">Another box</a>
</div>
<div id="another-box" class="popup">
<form>
    <select>
        <option id="1">option 1</option>
        <option id="2" selected>option 2</option>
    </select>
</form>
</div>

感谢您的帮助

Answer 1

要更改选择的条目，您应更改.selected 属性，而不是属性。

document.getElementById(id).selected = true;

该属性只设置控件的初始值，而属性设置当前值。

请注意，也无需从先前选定的元素中删除属性。这是自动发生的，因为（默认情况下）一次只能“选择”一个元素。

或者，将封闭.value上的<select>属性设置为与所需<option>元素的值相同。该值将是value元素上<option>属性的值，如果没有value属性，则为包含的文本。

请参阅http://jsfiddle.net/alnitak/C98Wc/

Answer 2

像这样：

document.getElementById(id).selected=1;//or true

而另一种方式是

document.getElementById(id).selected=0;//or false

@Alnitak - 感谢您的纠正。

Answer 3

观看您的报价，尝试将<a>标记替换为：

<a href="#another-box" rel="popup" onClick="updateSelected('1', '2', 'box');">Another box</a>

您不能在双引号中使用双引号

Answer 4

为什么不一直使用jQuery？也可以在双引号中使用单引号

FIDDLE

<a href="#another-box" rel="popup" id="another" >Another box</a>


$(function() {
    $('a[rel*=popup]').leanModal({ top : 200, closeButton: ".popup-close" });       
    $("#another").on("click",function(e) {
        updateSelected("o1","box");
        return false; // cancel click - can be e.preventDefault() instead 
    });


});         
function updateSelected(id, parentID) {
    $("#"+parentID).css("display","none"); // or .hide()
    $("#"+id).prop("selected",true);
}

使用Javascript设置所选属性onClick

4 个答案: