然而,隐藏和显示基于下拉选择的输入文本

时间:2013-08-26 20:03:37

标签: javascript jquery

根据下拉选项隐藏和显示输入文本,但是当我提交表单并且我没有完成表单验证时,“输入文本”不再显示。

我正在使用jquery,我可以展示和隐藏,效果很好,但这部分很烦人。

我的客户不会填写所有表单字段,因此当他们提交表单时,我希望他们根据下拉选项查看输入文本,RATHER,输入文本丢失。

$(document).ready(function() {
    $('#shipping').change(function() {
        if ( $("#shipping").val ()  ==  "LA") 
        {                              
            $('#mydiv').show();
        }
        else
            $("#mydiv").hide();
    }); 
});

<select name="shipping" id="shipping">
 <option value="LA">LA</option>
 <option value="NYC">NYC</option>
</select>

<tr id="mydiv" style="display:none">
<td><input type="text" name="testing"></td>
</tr>


<tr>
<td><input type="text" name="testing2"></td>
</tr>



<tr>
<td><input type="text" name="testing3"></td>
</tr>

<input type="submit" value="Submit" />

4 个答案:

答案 0 :(得分:0)

在这里查看jsFiddle。有用。 我在你的html中没有看到<table>标签,这是一个问题。

<select name="shipping" id="shipping">
    <option value="select">Select</option>
    <option value="LA">LA</option>
    <option value="NYC">NYC</option>
</select>
<table>
<tr id="mydiv" style="display:none">
    <td>
        <input type="text" name="testing" value="show/hide"/>
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="testing2"/>
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="testing3"/>
    </td>
</tr>
    </table>
<input type="submit" value="Submit" />

使用Javascript:

$('#shipping').change(function () {
    if ($("#shipping").val() == "LA") {
        $('#mydiv').show();
    } else $("#mydiv").hide();
});

答案 1 :(得分:0)

您要验证的内容。

if textbox is hidden , it should be part of validation or not 
if that is part of validation use 
$('#id').prop("required", "true");
else
$('#id').removeAttr("required");

答案 2 :(得分:0)

而不是内联样式,尝试使用类来隐藏它,如

<tr id="mydiv" class="hidden">
<td><input type="text" name="testing"></td>
</tr>

CSS:.hidden{display:none;}

然后再做,

$(document).ready(function() {
    $('#shipping').change(function() {
        if ( $("#shipping").val ()  ==  "LA") 
        {                              
            $('#mydiv').show();
        }
        else
            $("#mydiv").hide();
    }); 
});

(OR) 当你想要显示#mydiv

时,尝试删除“隐藏”类
$(document).ready(function() {
    $('#shipping').change(function() {
        if ( $("#shipping").val ()  ==  "LA") 
        {                              
            $('#mydiv').removeClass('hidden');
        }
        else
            $("#mydiv").addClass('hidden');
    }); 
});

它会起作用。!!

答案 3 :(得分:0)

如果您希望在页面重新加载该信息时显示div,则需要在加载页面时检查所选信息。 不要使默认显示为none。加载页面时隐藏它。

 $(document).ready(function() {
 $("#mydiv").hide();

var shipLocation = $("select#shipping").val();
if ( shipLocation ==  "LA") 
    {                              
        $('#mydiv').show();
    }

然后添加您的送货更改方法。