时间戳

首页 > 解决方案 > 如何根据选择隐藏和显示 HTML 中的字段

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

问题描述

我有这段代码，我想要的是，如果您单击“标签”或“产品”，您是否会根据您的选择看到“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();
            } 
        });
    });

标签： javascriptjqueryhtmldrop-down-menu

解决方案

一方面，不要使用“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";
  }
}

推荐阅读