入力が空でないときに選択タグを非表示にする

Question

更新：お返事ありがとうございます！ あなたが投稿した機能を使っても、私はそれを理解できないようです。ここに私が使用するコードがあります。また、私は自分のサイトにjQueryを持っていますが、jQueryを使用することはできません。

<form method="post" action="" name="items"> 
    <table> 
     <tr> 
      <td>Link URL:</td> 
          <td><input type="text" name="item_url" size="25"/></td> 
     </tr> 
     <tr> 
      <td>Link name</td> 
      <td><input type="text" name="item_name" size="25" /></td> 
     </tr> 
        <tr> 
          <td>Site Name:</td> 
          <td id="site_id"> 
            <select name="item_site_id"> 
              <option value="<?php echo $sites["site_id"]; ?>"><?php echo $sites["site_name"]; ?></option> 
            </select> 
          </td>      
        </tr> (the form contiunes, but only this part is relevant...) 

基本的に私は、ユーザーが「リンクURL」ライン（入力名item_url）には何も入ったとき、SELECTタグ（SITE_ID）が消えていること、それを作りたいです。 もう一度お手伝いしていただきありがとうございます:)

EDIT2：解決済み、おかげさまで助けてください！ もう1つの質問 - SELECTをどのように追跡できますか？私はそれをそうしたい、そのitem_urlとitem_nameは、ユーザーが選択を変更すると消えます。それは可能ですか？

Answer 1

あなたがそれを起こしたいときに応じて、指定しなかったので、onblureventを使用しました。同じ方法でonchange、onkeydown、onclickなどを使用することができます。

jsFiddle例

HTML

<input type="text" onblur="hideSelect(this);" /> 
<select id="mySelect"></select> 

Javascriptを

function hideSelect(txt){ 

    if(txt.value.length == 0){ 
     document.getElementById('mySelect').style.display = "none"; 
    } 
    else{ 
     document.getElementById('mySelect').style.display = "inline"; 
    } 

} 

Answer 2

基本例：

あなたはそれがかなり簡単だ jQueryを使用してに開放している場合は

http://jsfiddle.net/NDSE3/

document.getElementsByTagName('input')[0].onchange = function(){ 
    var select = document.getElementsByTagName('select')[0]; 

    if(this.value == '') 
     select.style.display = 'inline'; 
    else 
     select.style.display = 'none'; 
} 

Answer 3

。

ライブ例：http://jsfiddle.net/justrhysism/hnuHQ/

HTML：

<input type="text" id="myTextInput" /> 

<select id="mySelectBox"> 
    <option>One</option> 
    <option>Two</option> 
</select> 

jQueryの

$('#myTextInput').change(function(){ 
    if ($.trim($(this).val()) == '') { 
     $('#mySelectBox').show(); 
    } else { 
     $('#mySelectBox').hide(); 
    } 
}); 

どちらかjQueryの$(document).ready()ハンドラにスクリプトを置く、または単に後にそれを読み込みますDOM内のHTML

注：これは、テキストボックスがフォーカスを失ったときにすぐにではなく、選択ボックスを非表示にします。すぐに非表示にしたい場合は、keyUp（）イベントハンドラを使用してみてください。