Question

我有这段代码，我想要的是，如果您单击“标签”或“产品”，那么您会根据选择看到“ foo”或“产品”下的选项。因此，如果我单击“标签”，则“产品”中的字段将不可用。

我试图用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();
            } 
        });
    });

Answer 1

一方面，不要使用“ display; none”！使用“显示：无”。同样，您也不需要JQuery，普通的javascript就可以了。首先，将选择标签更改为此：

<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";
  }
}

如何根据选择隐藏和显示HTML中的字段

1 个答案: