Question

我正在一个项目中，用户可以方便地输入记录，我想知道如何在更改选择框值的同时显示或隐藏文本框

在这里，我有一个以婚姻状况命名的选择框

婚姻状况的选项是：“已婚”和“未婚”。

代码如下：

<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style = "color:  black;" required>
    <option value="">Please Select Marital Status</option>
    <option value="Married">Married</option>
    <option value="Un-Married">Un-Married</option>
</select>
<div class = "form-group col-md-3">
    <label for = "cc-payment" class = "control-label mb-1">Spouse Name</label>
    <input type = "text" autocomplete="off" class = "form-control"  name="Persoanl_Family_Spouse_Name" id = "Persoanl_Family_Spouse_Name"   style = "color:  black;" value="" placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable" required />
</div>

如果用户从上述选项中选择“已婚”，则会出现一个文本框，用于输入配偶姓名

如果用户从上述选项中选择“未婚”，则配偶姓名文本框应消失。

Answer 1

您可以为此目的采用.show() / .hide()方法：

$('[name="Personal_Family_Marital_Status"]').on('change', function(){
  $(this).val() == 'Married' ? $('#spouse').show() : $('#spouse').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style = "color:  black;" required>
	<option value="">Please Select Marital Status</option>
	<option value="Married">Married</option>
	<option value="Un-Married">Single</option>
</select>
<div id="spouse" class = "form-group col-md-3" style="display:none">
	<label for = "cc-payment" class = "control-label mb-1">Spouse Name</label>
	<input type = "text" autocomplete="off" class = "form-control"  name="Persoanl_Family_Spouse_Name" id = "Persoanl_Family_Spouse_Name"   style = "color:  black;" value="" placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable" required />
</div>

Answer 2

使用Jquery change事件进行选择，希望这会有所帮助，谢谢

$("#Personal_Family_Marital_Status").change(function(e){

if($(this).val()=='Married')
{
  $('.hide').addClass('show').removeClass('hide')
}
else
$('.show').addClass('hide').removeClass('show')

})

 .hide
 {
 display:none;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status"   required>
<option value="">Please Select Marital Status</option>                         <option value="Married">Married</option>
<option value="Un-Married">Unmarried</option>
</select>


 <div class = "form-group col-md-3 hide">
<label for = "cc-payment" class = "control-label mb-1">Spouse Name</label>
<input type = "text" autocomplete="off" class = "form-control "  name="Persoanl_Family_Spouse_Name" id = "Persoanl_Family_Spouse_Name"   style = "color:  black;"   placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable" required />
</div>

Answer 3

假设您已包含jQuery。

<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style = "color:  black;" required>
    <option value="">Please Select Marital Status</option>
    <option value="Married"></option>
    <option value="Un-Married"></option>
</select>


<div class="form-group col-md-3 hidden" id="spouseNameBlock">
    <label for = "cc-payment" class = "control-label mb-1">Spouse Name</label>
    <input type = "text" autocomplete="off" class = "form-control"  name="Persoanl_Family_Spouse_Name" id = "Persoanl_Family_Spouse_Name"   style = "color:  black;" value="<?php echo $data['Persoanl_Family_Spouse_Name'];?>"  placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable" required />
</div>


<script>
    $('#Personal_Family_Marital_Status').change(function(){
        if($(this).val() === 'Married'){
            $('#spouseNameBlock').removeClass('hidden');
        } else {
            $('#spouseNameBlock').addClass('hidden');
        }
    });
</script>

Answer 4

您必须利用CSS中的display和visibility属性。我将使用Vanilla JavaScript而不是jQuery来访问DOM。在您的示例中：

HTML：

<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style = "color:  black;" required>
   <option id="Select" value="">Please Select Marital Status</option>
   <option id="Married" value="Married"></option>
   <option id="UnMarried" value="Un-Married"></option>
</select>
<input type="text" id="SpouseName">

Vanilla JavaScript：

if (document.getElementById("Married").selected = true)
{
    document.getElementById("SpouseName").style = "display: block; visibility: visible";
}
if (document.getElementById("UnMarried").selected = true)
{
    document.getElementById("SpouseName").style = "display: none; visibility: hidden";
}

Answer 5

您将要使用select元素上的change事件。根据其值，您可以显示/隐藏配偶部分

当用户提交对元素值的更改时，将为，和元素触发change事件。与输入事件不同，不一定会针对元素值的每次更改触发更改事件。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

var ddMaritalStatus = document.getElementById("Personal_Family_Marital_Status");
var fgSpouse = document.getElementById("fgSpouse");

ddMaritalStatus.addEventListener("change", function() {
  fgSpouse.style.display = this.value === 'Married' ? 'block' : 'none';
})

<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style="color:  black;" required>
  <option value="">Please Select Marital Status</option>
  <option value="Married">Married</option>
  <option value="Un-Married">Un Married</option>
</select>


<div id="fgSpouse" class="form-group col-md-3" style="display:none">
  <label for="cc-payment" class="control-label mb-1">Spouse Name</label>
  <input type="text" autocomplete="off" class="form-control" name="Persoanl_Family_Spouse_Name" id="Persoanl_Family_Spouse_Name" style="color:  black;" value="" placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable"
    required />
</div>

Answer 6

您可以通过使用Jquery更改功能来实现

$("#Personal_Family_Marital_Status").change(function(){
  if($(this).val() == "Married")
    $("#id_spouse").show();
  else
    $("#id_spouse").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style = "color:  black;" required>
  <option value="">Please Select Marital Status</option>      
  <option value="Married">Married</option>
  <option value="Un-Married">Un-Married</option>
</select>


<div class = "form-group col-md-3">
  <div id="id_spouse" style="display:none">
    <label for = "cc-payment" class = "control-label mb-1">Spouse Name</label>
    <input type = "text" autocomplete="off" class = "form-control"  name="Persoanl_Family_Spouse_Name" id = "Persoanl_Family_Spouse_Name"   style = "color:  black;" value=""  placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable" required />
  </div>
</div>

Answer 7

**You can use jquery onchange function.**  

 $(document).on('change','#Personal_Family_Marital_Status', function(){
              if($(this).val()=='Married'){
                $('#Spouse').show();
              }else{
                $('#Spouse').hide();
              }
            });


     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     
    <select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style="color:black;" required>
                <option value="">Please Select Marital Status</option>         
                <option value="Married">Married</option>
                <option value="Un-Married">Un-Married</option>
            </select>
            <div class = "form-group col-md-3" id="Spouse" style="display:none;">
            <label for = "cc-payment" class = "control-label mb-1">Spouse Name</label>
            <input type = "text" autocomplete="off" class = "form-control"  name="Persoanl_Family_Spouse_Name" id = "Persoanl_Family_Spouse_Name"   style = "color:  black;" value="<?php echo $data['Persoanl_Family_Spouse_Name'];?>"  placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable" required />
            </div>

更改select值时如何显示/隐藏文本框

7 个答案: