2011-02-23 7 views
1

私は選択リスト内にオプションリストを持っています。選択したときにオプション値を含むテキストフィールドもあります。 私はデフォルトでテキストフィールドを無効にしたいと思います。オプションの1つを選択すると、テキストフィールドが有効になります。 誰かが私を同じような例に導くことができますか?ここで選択リストから選択オプションまでのテキストフィールドを無効にする

おかげ

答えて

1

は無地のJavaScript jsfiddleを使用した例です。

HTML:

<select id='myselect'> 
    <option value='none'>none</option> 
    <option value='1'>1</option> 
    <option value='2'>2</option> 
    <option value='3'>3</option> 
</select> 
<input type='text' value='' name='mytext' id='mytext' disabled /> 
<button value='add' id='addbtn' name='addbtn'>add</button> 

我々が無効にすることにより、入力テキストフィールドを開始しました。私たちは基本的にオプションが選択されているときに、我々は、現在選択されているものに、テキストフィールドの値を設定し、基本的にはテキストフィールドの無効化をfalseに設定selectタグにのonchange状態を追加する前のポストに例を使用して

var myselect = document.getElementById('myselect'); 

function createOption() { 
    var currentText = document.getElementById('mytext').value; 
    var objOption = document.createElement("option"); 
    objOption.text = currentText; 
    objOption.value = currentText; 

    //myselect.add(objOption); 
    myselect.options.add(objOption); 
} 

document.getElementById('addbtn').onclick = createOption; 

myselect.onchange = function() { 
    var mytextfield = document.getElementById('mytext'); 
    if (myselect.value == 'none'){ 
     mytextfield.value = ''; 
     mytextfield.disabled = true; 
    }else { 
     mytextfield.value = myselect.value; 
     mytextfield.disabled = false; 
    } 
} 

。したがって、オプションが選択されたときにテキストフィールドを有効にします。さらに、私は 'none'というオプションを追加したので、ユーザーが何も選択しなかった場合は、テキストフィールドを除外します。

+0

優れています。 – firestruq

2
$(function() { 

    var $select = $('#idForSelectBox'), 
     $textarea = $('#idForTextarea'), 
     status; 

    $select.bind('change', function() { 

     // If the value of the select box matches "Whatever you want" 
     // set status to '', else set status to 'disabled' 
     status = ($(this).val() === 'Whatever you want') ? '' : 'disabled'; 

     $textarea.attr('disabled', status); 

    }); 

}); 
+0

もしOPがjQueryフレームワークを必要とするjQueryソリューションであることがわからない場合には、 – kjy112

関連する問題