选择下拉“无/其他”值时清除相应的文本输入

Question

当前：下拉选择“是/否”。

'是' = 显示要输入的“附加”下拉列表/输入

'否' = 隐藏“附加”下拉菜单/输入

---

想要：我想这样做，如果用户选择“是”，然后在“附加”下拉列表/输入中输入一些内容，然后决定将他们的原始答案切换回“否”，请清除“附加”值.

这就是当表单提交时，我不会在 POST 中携带任何不需要的值。

HTML

<section><style>.required {color:#ff0000;font-weight:bold;position:absolute;}</style>
<div class="section_header">LNB INFORMATION</div>
                <label>Did you install an LNB?<span class="required">*</span>&nbsp;</label>
                <select class="DropdownClass" name="lnb_choice" id="lnb">
                    <option disabled selected value="">Select...  (Required)</option>
                    <option value="1">Yes</option>
                    <option value="0">No</option>
                </select>
                <br>
                <div class="LNBChoice DivElement1">
                    <select class="DropdownClass qrt" name="lnb_type" id="lnb_type">
                        <option value="">Type...</option>
                        <option value="3D2RBLNB">REV 3 LNB</option>
                        <option value="5D2RBLNB">REV 5 LNB</option>
                        <option value="SL3S4NR2">SWM3 LNB</option>
                        <option value="SL5S4NR2">SWM5 LNB</option>
                        <option value="SL5K4NR1">KAKU LNB</option>
                    </select>
                    <input type="text" id="lnb_barcode" name="lnb_barcode" placeholder="LNB Serial..." class="scantype basic" />

                </div>
</section>

JS + Jquery 1.10.1

$(".DropdownClass").change(function () {

    if ($(this).attr('name') == 'lnb_choice') {
        var number = $(this).val();

        $('.LNBChoice').hide().slice( 0, number ).show();
    }
}); 

JSFIDDLE： https ://jsfiddle.net/ra1t9jfL/

附加问题：这都是 a 的一部分，如果出现错误，我会将它们返回到此页面，使用 url 上的 &field=value 将值返回到相应的文本输入框/下拉列表。

我可以将“是”值返回到保管箱，但它不会激活“显示附加 jquery”。

因此，用户必须选择“否”，然后返回“是”以显示“附加”。

Answer 1

在$('.LNBChoice').hide().slice( 0, number ).show();之前或之后添加这两行

$('#lnb_type').val('');
$('#lnb_barcode').val('');

Answer 2

要在用户从第一个下拉列表中选择“否”时清除其他字段，您可以添加以下内容：

$('#lnb').change(function() {

    if($(this).val() === '0') {

        /* User selected "no" so reset the additional field values */ 
        $('#lnb_type').val('');
        $('#lnb_barcode').val('');
    }    
});

要根据从 URL 的查询字符串传递的值（即从错误屏幕返回）初始化表单，您可以采用以下方法：

/* Add the following script to your page */
$(function() {

    /* 
    Access query string of url, remove preceding "?", and split
    query string by "&" to return an array of "field=value" sub-strings
    if any exist. Iterate the array of these sub-strings with forEach
    */ 
    location.search.slice(1).split('&').forEach(function(part){

        /* Split current sub-string by "=" to obtain name and value */
        var nameValue = part.split('=');
        var name = nameValue[0];
        var value = value[1];
​
        /* Select form element by name and initialise the value */
        $('[name="' + name + '"]').val(value);
    });
});