当选择select时,jquery更改输入结果

时间:2014-02-18 10:03:48

标签: jquery html events

目前当我选择#choice时他> #He Boy> #outcome是“男孩”,之后当我将#choice改为她时,#outcome仍然是“男孩”。我可以知道当我切换#choice时,#outcome会改变为。

<select id="choice">
    <option value="He" selected="selected">He</option>
    <option value="She">She</option>
</select>
<p>
    <select id="He">
        <option value="choose" selected="selected" Disabled Selected value="">Choose</option>
        <option value="Boy">Boy</option>
        <option value="Man">Man</option>
    </select>

    <select id="She">
        <option value="choose" selected="selected" Disabled Selected value="">Choose</option>
        <option value="Girl">Girl</option>
    <option value="Woman">Woman</option>
    </select>
</p>
<input type="text" id="outcome" readonly>

Jquery脚本

$(function() {
    $('#He').show(); 
    $('#choice').change(function(){
        if($('#choice').val() == 'He') {
            $('#He').show().prop({disabled: false}); 
        } 
        else {
            $('#He').hide().prop({disabled: true}); 
        } 
    });

    $('#She').hide(); 
    $('#choice').change(function(){
        if($('#choice').val() == 'She') {
            $('#She').show().prop({disabled: false }); 
        } 
        else {
            $('#She').hide().prop({disabled: true }); 
        } 
    });
});

$( "#He" ).change(function() {
    var str = "";
    $( this ).each(function() {
         $(str += $( this ).val()).show();
    });
    $( "#outcome" ).val( str );
  })
  .trigger( "change" );

$( "#She" ).change(function() {
    var str = "";
    $( this ).each(function() {
         $(str += $( this ).val()).show();
    });
    $( "#outcome" ).val( str );
  })
  .trigger( "change" );

1 个答案:

答案 0 :(得分:0)

你的意思是

$(function () {
    $('#choice').change(function () {
        var he = $(this).val() == 'He';
        $('#He').toggle(he).prop({
            disabled: !he
        });
        $('#She').toggle(!he).prop({
            disabled: he
        });
        $('#' + (he ? 'He' : 'She')).change()
    }).change();

    $("#He, #She").change(function () {
        $("#outcome").val($(this).val());
    });
});

演示:Fiddle