Question

嗨我有一个html，我在开始时有下拉菜单，如何根据选择的下拉值更改表单字段？这是代码。就像我选择一般查询一样，它应该显示前两个表单字段和一般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>

如果我选择信用查询，它应该显示前两个表单字段和信用div中的表单字段如果我选择付款查询，它应显示前2个表单字段和付款div中的表单字段

Answer 1

这里的聚会晚了，但这是另一种方式

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

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

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

还创建了demo

Answer 2

如果这是你的意思，只需隐藏所有div，并在选择更改时显示相应的div

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

Answer 3

我为案例撰写＆＃34;一般＆＃34; .. U可以在其他案例中使用

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

根据下拉值更改表单字段

3 个答案: