基于下拉值更改表单字段

嗨我有一个HTML在我开始下拉菜单时，如何根据下拉选择值更改表单域？这是代码。就像如果我选择一般查询它应该显示第2个表单字段和一般DIV基于下拉值更改表单字段

<form action=""> 
    <select name="cases" id="cases"> 
     <option value="general">General Inquiry</option> 
     <option value="credit">Credit Inquiry</option> 
     <option value="payment">Payment Issue</option> 
    </select><br> 
    <label for="email">Email Address <span>*</span></label> 
    <input type="text"> 
    <label for="full name">Full Name <span>*</span></label> 
    <input type="text"> 


    <div class="general" id="general"> 
     <label for="documents">Wish to submit any requested documents?</label> 
     <input type="radio" name="radio">Yes 
     <input type="radio" name="radio">No <br><br> 
     <label for="select">How did you find out about us?<span>*</span></label><br> 
     <select name="case" id="case-type"> 
      <option value="value1">Value 1</option> 
      <option value="value2">Value 2</option> 
      <option value="value3">Value 3</option> 
     </select><br> 
    </div> 

    <div class="credit" id="credit"> 
     <label for="Date of Inquiry">Date of Inquiry<span>*</span></label> 
     <input type="date"> 
     <label for="Agency">Agency 3 <span>*</span></label> 
     <input type="text">   
    </div> 

    <div class="payment" id="payment"> 
     <label for="Service Phone Number">Service Phone Number<span>*</span></label> 
     <input type="text"> 
     <label for="select">Topic<span>*</span></label><br> 
     <select name="case" id="case-type"> 
      <option value="topic1">Topic 1</option> 
      <option value="topic2">Topic 2</option> 
      <option value="topic3">Topic 3</option> 
     </select><br><br> 
    </div> 
    <br><br> 
    <button>Submit</button> 
</form>

表单字段，如果我选择征信它应该显示第2个表单字段和信贷DIV 表单字段，如果我选择付款查询应该首先显示2个表单字段和支付股利的表单字段

来源

2016-05-23 hemanth kumar

你需要写javascript函数，这将决定什么档案隐藏和显示内容。关于下拉的变化 – prashant

是的，我需要那个会决定这个功能的Javascript。 –

我写的情况下，“一般” .. U可以按照这个对于其它情况

$("#cases").change(function() { 
      var case = $("#cases option:selected").val(); 
      if(case=="general") 
      { 
       //show 2 form fields here and show div 
       $("#general").show(); 
      } 
     });

来源

2016-05-23 12:52:30 Muthu

非常感谢你。 –

@Muthu，这不是一个很好的做法，原因是如果更多的项目被添加到列表中，您将需要更新更改方法 – R4nc1d

只是隐藏所有div的表演对应一个选择的变化，如果这是你的意思

$('div').hide() 
$('#cases').change(function(){ 
    var v=this.value; 
    $('div').hide().filter(function(){return this.id==v}).show() 
});

来源

2016-05-23 12:52:58

非常感谢。 –

迟到了这里，但这里是另一种方式

// hide all the divs 
    $('div').hide() 

    // Show and hide selected div 
    $('#cases').change(function() { 
     var value = this.value; 

     $('div').hide() 
     $('#' + this.value).show(); 
    });

也创造了demo

来源

2016-05-23 13:15:31 R4nc1d

基于下拉值更改表单字段

回答

相关问题