Question

我有一个选择标签，上面列出了许多选项，还有一个按钮，该按钮应该向用户显示更多信息，包括修改选项以显示更多信息。因此，例如：

普通视图

<option>RegularInfo</option>

其他视图-单击按钮后应显示

<option>RegularInfo (ExtraInfo)</option>

我希望我的按钮能够在这两个视图之间切换，但是我不确定是否有一种简单的方法。我考虑过的一种方法是编写一个javascript函数来手动修改文本，但是随后，由于大量的字符串操作，代码变得有些混乱。

我尝试将span嵌入其中的类，然后仅使用jQuery切换类，如下所示：

<option>RegularInfo<span class = "extra">(ExtraInfo)</span></option>

//JQuery
$(".extra").toggle();

但是，事实证明您不能将html元素嵌入选项标签中，因此该方法对我不起作用。

我是否可以通过一种方法来切换选项的 part 的可见性，而不必使用javascript手动设置选项的值？

Answer 1

是的，您不能在<option>标签内嵌套子标签。如果您不想使用javascript附加文本，则可以尝试使用类似于以下方法的一种方法：在标签内选择文本并进行操作（在您的情况下隐藏并显示）：https://stackoverflow.com/a/16585227/7184365

Answer 2

我过去已经这样做过，您只需在此处复制代码即可进行更改。但是这里的定义是您需要有一个复选框，因为该复选框只能处理2个值，如开/关按钮一样。您只需将复选框重新设计为切换按钮即可。但是，如果您不想更改设计，请不要复制CSS。

<script>
					function clicker(enable){
						.. some codes here ..
					}
</script>

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<label class="switch">
							    <input type="checkbox" <?php echo "onclick='clicker("$someVar")'";
							      if(!empty($someVar)){
							          echo " " . "checked";
							      }
							    ?>
							    ><span class="slider round"></span>
</label>

，当然，您需要将切换按钮的事件保存到数据库中，因此如果保留它，它将保持原样。因此，基本上，您还需要为此使用ajax。

Answer 3

option元素不能有任何子元素。

摘自HTML 5规范草案：

内容模型：文本。

您不能在<option>标记内嵌套子标记，但是可以替换其中的文本。

替换为纯JS：

function changeOptionText()
{
	var select1 = document.querySelector('#select1');
	select1.firstElementChild.innerHTML += ' (ExtraInfo)';
}

<select id="select1">
	<option>RegularInfo</option>
	<option>Other info</option>
</select><br>
<input type="button" value="change option" onclick="changeOptionText()">

替换为jQuery：

function changeOptionText()
{
	var firstOptEl = $('#select1 option').first();
	firstOptEl.html(firstOptEl.html() + ' (ExtraInfo)');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="select1">
	<option>RegularInfo</option>
	<option>Other info</option>
</select><br>
<input type="button" value="change option" onclick="changeOptionText()">

如何隐藏/显示选项标签的一部分

3 个答案: