代码之家 › 专栏 › 技术社区 › user7012276

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

onchange html jquery php javascript

user7012276 · 技术社区 · 7 年前

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

我的代码在这里

<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实现的任何可能的方法吗

4 回复 | 直到 7 年前

Roshni hegde 7 年前

尝试此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");
        }
    }

Rahul 7 年前

尝试 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>

B. Desai 7 年前

编写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>

Ricardo Pontual 7 年前

您可以这样做:

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()