我想这样做的原因是,它将是情境化的。如果用户已登录,他们将看到下拉列表。如果没有,他们将看到一个文本列表。理想情况下只是纯文本,但我不知道是否可能,所以我想我可以将<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/
答案 0 :(得分:0)
如果我正确理解你的目标,你可以将div放入并隐藏/显示或启用/禁用div,具体取决于用户是否登录。所以将你的选择包装在一个div中,然后切换它。
这样可以避免尝试通过简单地显示/隐藏或启用/禁用用户希望看到的内容来更改html。
答案 1 :(得分:0)
这应该将您的选择转换为复选框,前提是有一个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...
}
我希望这会有所帮助。