我有这段代码,我想要的是,如果你点击‘tag’或'producten‘,你会看到'foo’或'products‘下的选项基于你的选择。所以如果我点击“标签”,“产品”中的字段应该是不可用的。
我试着用Javascript来做这件事,但到目前为止我不能让它工作,因为我没有太多的经验。
请看下面的代码:
<p>
<select name="choice" style="width: 212px;">
<option id="tags"name ="tags" value="tags">Tags</option>
<option id ="producten"name ="producten" value="producten">Producten</option>
</select>
</p>
<p id="foo" style ="display;none" >
<select name = "id" style="width": 212px;>
<option value="id">id</option>
<option value="customer_id"></option>
</select>
<select name ="created_at" style="width":212px;>
<option value="created_at">created_at</option>
<option value="customer_id"></option>
</select>
<select name ="is_visible" style="width": 212px;>
<option value="is_visible">is_visible</option>
<option value="customer_id"></option>
</select>
<select name ="products_count" style="width": 212px;>
<option value="products_count">products_count</option>
<option value="customer_id"></option>
</select>
<select name ="slug" style="width": 212px;>
<option value="slug">slug</option>
<option value="customer_id"></option>
</select>
<select name ="title" style="width": 212px;>
<option value="title">title</option>
<option value="customer_id"></option>
</select>
<select name ="updated_at" style="width": 212px;>
<option value="updated_at">updated_at</option>
<option value="customer_id"></option>
</select>
</p>
<p id="products" style ="display;none" >
<select name ="title" style="width": 212px;>
<option value="title">title</option>
<option value="customer_id"></option>
</select>
</p>
这是我在这段代码中使用的Javascript,但它并没有真正起作用:
$(document).ready(function (){
$("#tags").change(function() {
// foo is the id of the other select box
if ($(this).val() != "producten") {
$("#foo").show();
}else{
$("#foo").hide();
}
});
});
$(document).ready(function (){
$("#producten").change(function() {
// foo is the id of the other select box
if ($(this).val() != "tags") {
$("#products").show();
}else{
$("#products").hide();
}
});
});
发布于 2018-07-01 08:44:39
首先,不要使用"display;none"!使用"display: none“。而且你不需要JQuery来做这件事,普通的javascript就可以做的很好。首先,将select标记更改为:
<select name="choice" id="choice" style="width: 212px;">
<option id="tags"name ="tags" value="tags">Tags</option>
<option id ="producten"name ="producten" value="producten">Producten</option>
接下来,将"foo“的样式设置为"display: block",然后将产品的样式设置为"display: none”。现在使用以下javascript代码:
var choice = document.getElementById("choice");
var foo = document.getElementById("foo");
var products = document.getElementById("products");
choice.onchange = function(){
if(choice.value == "tags"){
foo.style.display = "block";
products.style.display = "none";
}
else if(choice.value == "producten"){
foo.style.display = "none";
products.style.display = "block";
}
}
https://stackoverflow.com/questions/51119474
复制相似问题