使輸入值取決於“選擇選項”選擇

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

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

在這里檢查

Answer 3

使用change()事件

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

演示

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

查詢代碼：

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