使用javascript將選擇更改為復選框

Question

我想這樣做的原因是，這將視情況而定。 如果用戶已登錄，他們將看到下拉列表。 如果沒有，他們將看到文本列表。 理想情況下，只是純文本，但我不知道是否可行，因此我想將<select>轉換為復選框，並使用CSS隱藏復選框。

基本上，我們不希望未登錄的用戶感到他們可以選擇任何東西，因為他們將無法訂購，這可能會導致沮喪。 但是我們仍然希望他們以不可選擇的文本形式查看每種產品的可用選項。 如果有比我想的更好的方法，我將不勝感激。 目前，這是我已修補的內容，但未將選擇更改為復選框。

我從這里獲取了一些代碼作為起點： http : //www.w3schools.com/jsref/met_element_setattribute.asp

另外，我無法通過ID來獲取<select>，因為這將出現在所有<select>上。

<select id="unique_id" class="unique_class"  data-attribute_name="unique_attribute_name" name="unique_name">
    <option value="" selected="selected">Choose an option</option>
    <option class="attached enabled" value="516">5/16"</option>
    <option class="attached enabled" value="38">3/8"</option>
</select>

Javascript：

function myFunction() {
    document.getElementsByTagName("SELECT")[0].setAttribute("type", "checkbox"); 
}

這是一個小提琴： https : //jsfiddle.net/d4qdekom/

Answer 1

如果我正確地理解了您的目標，則可以根據用戶是否登錄來放置div並隱藏/顯示或啟用/禁用div。 因此，將選擇內容包裝在div中，然后進行切換即可。

這樣可以避免僅通過顯示/隱藏或啟用/禁用您希望用戶看到的內容來嘗試更改html的方法。

Answer 2

如果存在一個ID為“容器”的HTML元素來追加新的復選框，這會將您的選擇轉換為復選框。

這是HTML

<select id="unique_id" class="unique_class" data-attribute_name="unique_attribute_name" name="unique_name">
    <option value="" selected="selected">Choose an option</option>
    <option class="attached enabled" value="516">5/16"</option>
    <option class="attached enabled" value="38">3/8"</option>
</select>

<div id="container"></div>

JavaScript函數將下面的選擇轉換為復選框

function myFunction() {
    var select = document.getElementById('unique_id');
    var container = document.getElementById('container'); 
    var i;
    for (i = 0; i < select.length; i++) {
        var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'option';
        checkbox.id = 'randomId' + i;
        checkbox.value = select.options[i].text;
        var label = document.createElement('label')
        label.htmlFor = 'randomId' + i;
        label.appendChild(document.createTextNode(select.options[i].text));
        container.appendChild(checkbox);
        container.appendChild(label);
    }
}

然后，您可以繼續進行操作，然后從DOM中刪除所選內容。 我想所有這些都應該通過JQuery簡化

這是使用getElementsByTagName的更新：

var selects = x.getElementsByTagName('SELECT');  // this is a node list
for (var i = 0; i < y.length; i++) {
  var select = selects[i]; // this is a single select element
  // You can call the above function on each select here...
}

這是一個工作的jsFiddle

我希望這有幫助。