我有一个选择框性别，我想在更改此性别 i 后更改其他字段的标签

Question

我有一个选择框性别，我想在更改此性别后更改其他字段的标签

我的代码在这里

<label class="control-label col-sm-3">Gender</label>
<div class="col-sm-9">
    <select class="form-control" id="gender" name="gender" onchange="changelabel()">
        <option value="">Gender</option>
        <option <?php if($res['gender']=='Female'){?> selected="selected" <?php } ?> value="Female">Female</option>
        <option <?php if($res['gender']=='Male'){?> selected="selected" <?php } ?> value="Male">Male</option>
    </select> 
    <!-- Other fields are -->
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label col-sm-3"><span id="prtttl">Wife Title</span></label>
                <div class="col-sm-9">
                    <select class="form-control" id="partnerTtl" name="partnerTtl">
                        <option value="">Select</option>
                        <option <?php if($res['partnerTtl']=='Smt'){?> selected="selected" <?php } ?> value="Smt">Smt</option>
                        <option <?php if($res['partnerTtl']=='Late'){?> selected="selected" <?php } ?> value="Late">Late</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label col-sm-3"><span id="prtnms">Wife Name</span> </label>
                <div class="col-sm-9">
                    <input type="text" name="hwname" value="<?php echo $res['partnerName'] ?>" placeholder="Husband/Wife Name" class="form-control">
                </div>
            </div>
        </div>

当用户选择男性时，如果用户选择性别女性，则妻子姓名的标签将相同，标签更改为丈夫姓名是使用javascript执行此操作的任何可能方法

Answer 1

试试这个jquery

function changelabel()
    {
        if($("#gender").val() == 'Female')
        {
            $("#prtttl").text("Husband's Title");
            $("#prtnms").text("Husband's Name");
        }
        else
        {
           $("#prtttl").text("Wife's Title");           
           $("#prtnms").text("Wife's Name");
        }
    }

Answer 2

尝试这样的事件onchange

<script type="text/javascript">
        $(document).ready(function() {
            $('select').on('change', function() {
              data=this.value;
              if (data=='female') {
                $(".your class or Id").append('<span id="prtnms">Wife Name</span>');
              }
            })
        });
    </script>

Answer 3

编写你的 JS 函数如下：

<script>
function changelabel(){
  if($("#gender").val() == 'Female')
  {
     $("#prtttl").html("Husband Title");
     $("#prtnms").html("Husband Name");
  }
  else
  {
     $("#prtttl").html("Wife Title");
     $("#prtnms").html("Wife Name");    
  }
}
</script>

Answer 4

你可以这样做：

function changelabel() {
   if ($('#gender').val()== 'Female') {
       $('#prtnms').text('Husband Name')
   else
       $('#prtnms').text('Wife Name');
}

但是当你标记jQuery时，你可以这样做：

$("#gender").change(function() {
  if ($(this).val() == 'Female') {
       $('#prtnms').text('Husband Name')
   else
       $('#prtnms').text('Wife Name');
});

请注意，由于内容只是文本，因此我使用了text()而不是html()