使输入值取决于“选择选项”选择

Question

基本上，如果选择了male，则使名为pronoun input的值为his。否则，使名为pronoun input的值为 her 。

<select name="sex">
    <option value="male">Male</option>
    <option value="female">Female</option>
</select>
<input type="text" name="pronoun" value="" placeholder="pronoun" />

Answer 1

尝试

$("select").change(function() {
   if($(this).val() == 'male'){
      $('input[name=pronoun]').val('his')
   }
   else{
      $('input[name=pronoun]').val('her')
    }
});

或

$("select").change(function() {
    $('input[name=pronoun]').val(($(this).val() == 'male') ? 'his' : 'her');
}).change();

小提琴

Answer 2

使用change()事件

$("select[name=sex]").change(function () {
    $('input[name=pronoun]').val((this.value == 'male') ? "His" : "Her")
});

演示

Answer 3

html 代码 ：

<select  name="sex" class="test">
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>
<input type="text" name="pronoun" class="pronoun" value="" placeholder="pronoun"/>

J查询代码 ：

<script>
$('.test').on('change', function() {
var value =this.value;
    if(value == 'male')
    {
        $('.pronoun').val('his');
    }
    else
    {
        $('.pronoun').val('her');
    }
});
</script>

请检查一下

Answer 4

你应该

分配一个id值，并使用jQuery的选择器和事件处理程序来做你想做的事情。

<select id="sex" name="sex">
    <option value="male">Male</option>
    <option value="female">Female</option>
</select>
<input id="pronoun" type="text" name="pronoun" value="" placeholder="pronoun" />
<script>
$('#sex').change(function() {
    $('#pronoun').val($(this).val() == 'female' ? 'her' : 'his');
});
$('#sex').change();
</script>

Answer 5

使用 jQuery -

var value = $('select[name="sex"]').val() == 'male' ? 'his' : 'her';
$('input[name="pronoun"]').val(value); // Set the value by default
$('select[name="sex"]').on('change', function() {
    if($(this).val() == 'male') {
        $('input[name="pronoun"]').val('his');
    } else {
        $('input[name="pronoun"]').val('her');
    }
})

在这里查看