使输入值取决于 `select 选项` selection

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

Fiddle

Answer 2

使用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');
    }
})

Check it here

Answer 3

使用change()事件

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

DEMO

Answer 4

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"/>

Jquery代码：

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

请查收

Answer 5

您应该分配一个 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>

使输入值取决于 `select 选项` selection

Make input value depend on `select option` selection

javascript

php

jquery

event-handling