首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何根据选择隐藏和显示HTML中的字段

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

Stack Overflow用户
提问于 2018-07-01 08:11:41
回答 1查看 86关注 0票数 0

我有这段代码,我想要的是,如果你点击‘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();
            } 
        });
    });
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 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";
  }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51119474

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档