當輸入不爲空時隱藏選擇標籤

更新：感謝您的答案！我似乎無法弄清楚，即使有你們發佈的功能。這是我使用的代碼。另外 - 我有我的網站上的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），選擇標記（SITE_ID）消失。再次感謝您的幫助:)

編輯2：解決，感謝您的幫助！還有一個問題 - 我如何跟蹤SELECT？我想這樣做，如果用戶更改選擇，item_url和item_name消失。那可能嗎？

來源

2012-02-08 pangi

你使用的是jQuery嗎？ – ggreiner 2012-02-08 02:19:49

@ggreiner，這個問題標記爲'jquery'？ – Gabe 2012-02-08 02:26:53

@加貝 - 放輕鬆，這不是第一次有人誤解了問題。 – j08691 2012-02-08 03:39:01

根據您希望發生的時間，因爲您沒有指定我使用了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"; 
    } 

}

來源

2012-02-08 02:20:47 Gabe

非常感謝！像魅力:) – pangi 2012-02-08 10:01:00

基本例如：

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'; 
}

來源

2012-02-08 02:23:27 xandercoded

爲什麼設置一個'inline'元素'display'作爲'block'？ – Gabe 2012-02-08 02:29:09

@加貝只是改變了它。雖然，有很多情況下你可能會這樣做;）特別是爲了節省'蓬鬆的HTML標記'，但這是另一個話題...... – xandercoded 2012-02-08 02:31:02

夠公平的，但爲了簡單起見，我爲什麼要提起它。 – Gabe 2012-02-08 02:32:38

-1

如果你打開使用jQuery這也很容易。

活生生的例子：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（）事件處理程序。

來源

2012-02-08 02:30:27 justrhysism

這個問題沒有標籤'jquery' – Gabe 2012-02-08 02:31:58

我明白，但不是每個人都知道jQuery及其提供的優勢。這個問題沒有說明他不能使用jQuery。 – justrhysism 2012-02-08 03:44:56

當輸入不爲空時隱藏選擇標籤

回答

相關問題