Question

我想这样做的原因是，它将是情境化的。如果用户已登录，他们将看到下拉列表。如果没有，他们将看到一个文本列表。理想情况下只是纯文本，但我不知道是否可能，所以我想我可以将<select>转换为复选框并隐藏CSS复选框。

基本上我们不希望没有登录的用户觉得他们可以选择任何东西，因为他们无法订购，这可能会导致沮丧。但我们仍然希望他们查看每种产品可用的选项作为不可选择的文本。如果有更好的方法来做到这一点而不是我的想法，我会感激你的建议。现在，这就是我一起修补的内容，但并没有将选择更改为复选框。

我从这里抓取了一些代码作为起点：http://www.w3schools.com/jsref/met_element_setattribute.asp

另外，我无法抓住＆lt;选择＆gt;通过id，因为这将是所有＆lt;选择＆gt;的。

<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为“container”的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函数将select转换为

下面的复选框

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...
}

This is a working jsFiddle

我希望这会有所帮助。

使用javascript更改选择复选框

2 个答案: