使用Javascript設置選中的atrribute onClick

我的JavaScript技能並不是最好的，但我最近一直在努力研究它們，並且我想要做的一件事是爲html選項標籤設置屬性。我在jfiddle上發佈了這個項目，讓它更容易看清楚。你可以看到here。我想我只是一行代碼或其他東西。使用Javascript設置選中的atrribute onClick

我將如何從選項2中刪除所選屬性併爲選項1創建選定屬性？換句話說，當我打開'另一個彈出'時，選擇選項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>

感謝您的幫助

來源

2013-04-02 Alex

內不要有數字ID，即使一些瀏覽器支持它，並用雙引號內的單引號。請參閱控制檯 – mplungjan

我必須，因爲我使用php循環動態生成它們 – Alex

@mplungjan嚴格來說，數字標識符是HTML5功能。 – Alnitak

要更改的條目中選擇，你應該改變.selected財產，而不是屬性。

document.getElementById(id).selected = true;

的屬性只設置控制的初始值，而屬性設置當前值。

請注意，也不需要刪除以前選擇的元素的屬性。這會自動發生，因爲（默認情況下）一次只能選擇一個元素。

或者，將封閉的<select>上的.value屬性設置爲與所需的<option>元素的值相同。該值將是<option>元素上value屬性的值，或者如果沒有value屬性，則包含文本。

見http://jsfiddle.net/alnitak/C98Wc/

來源

2013-04-02 14:55:06 Alnitak

好吧，我一直在努力使它工作，但它仍然不會改變它對我來說。我不知道爲什麼。看看我的更新鏈接http://jsfiddle.net/YZ42J/7/ – Alex

看你的JS控制檯。它不起作用，因爲'updateSelected'在'onLoad'處理程序中被包裝（通過jsfiddle），並且DOM0處理程序必須是全局的。將它改爲'wrap（head）'而不是它的工作。 http://jsfiddle.net/alnitak/MYarB/ – Alnitak

非常感謝！ – Alex

像這樣：

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

和周圍的其他方法是

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

@Alnitak - 感謝您的糾正。

來源

2013-04-02 14:54:16

'.selected'是一個布爾屬性。 – Alnitak

@Alnitak從我所瞭解的這是正確的; http://stackoverflow.com/questions/1033944/what-values-can-appear-in-the-selected-attribute-of-the-option-tag –

不，你錯過了這一點。作爲_attribute_你傳遞一個字符串，但是作爲_property_（這是你用'.selected'所擁有的）傳遞一個_boolean_。 – Alnitak

注意你的報價，試圖用此替代<a>標籤：

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

不能使用雙引號

來源

2013-04-02 14:56:55 Uby

內雙引號爲什麼不使用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); 
}

來源

2013-04-02 14:57:47 mplungjan

沒有必要從原始條目中刪除該屬性。除非它是「多重選擇」，否則它們都是相互排斥的。 – Alnitak

這仍然是錯誤的。 '.prop（'selected'）'需要一個_boolean_，而不是_string_，並且在不是事件處理函數的函數中不需要返回false。 – Alnitak

我在說'updateSelected'函數。 – Alnitak

使用Javascript設置選中的atrribute onClick

回答

相關問題