Zeige Drop-Down, wenn das Textfeld einen Wert von

hat

Ich muss Drop-down nur anzeigen, wenn ein Wert im Textfeld angegeben ist, andernfalls sollte das Dropdown-Menü ausgeblendet werden. Ich habe den folgenden Code mit Javascript versucht, aber es funktioniert nicht. Mit diesem Code ist das Dropdown-Menü nicht ausgeblendet, wenn im Textfeld kein Wert eingegeben wurde. Es zeigt die ganze Zeit.Zeige Drop-Down, wenn das Textfeld einen Wert von

<input type="text" name="example_textbox" id="textboxId" onclick="javascript:onTextboxChange()" > 

<select name="example_dropdown" id="dropdownId" > 
    <option selected value="0">Select One</option> 
    <option value="Option1">Option1</option> 
    <option value="Option2">Option2</option> 
    <option value="Option3">Option3</option> 
     </select> 

<script type="text/javascript"> 
var getTextBox = document.getElementById('textboxId'); 
var getDropDown = document.getElementById('dropdownId'); 

function onTextboxChange(){ 
    if (getTextBox.value != null) 
     { 
     getDropDown.disable='false'; 
     //getDropDown.style.display = 'inline'; 
     } 
    else{ 
     //getDropDown.style.display = 'none'; 
     getDropDown.disable='false'; 
    } 
}

Jeder Vorschlag, was soll ich tun, damit es funktioniert?

Quelle

2016-08-30 TechPro

Put-alert (getTextBox.value); an den Anfang Ihrer Funktion und sehen Sie, was der Wert ist. Höchstwahrscheinlich ist es eine leere Zeichenfolge, aber nicht null. –

BTW, mit style.display ist korrekt. –

Für den Anfang brauchen Sie nicht die „javascript“ -Teil im Handler:

<input type="text" name="example_textbox" id="textboxId" onclick="onTextboxChange()" >

Sie wollen wahrscheinlich auch gegen eine leere Zeichenfolge überprüfen und nicht nur null auch:

if (getTextBox.value != null && getTextBox.value != '')

Ich bin mir nicht sicher über eine disable Eigenschaft (um nicht zu erwähnen, beide Bedingungen auf den gleichen Wert), aber Ihre Styling-Änderungen funktionieren:

if (getTextBox.value != null && getTextBox.value != '') { 
    getDropDown.style.display = 'inline'; 
} else { 
    getDropDown.style.display = 'none'; 
}

Mit diesen Änderungen an Ort und Stelle, es seems to be working. Obwohl es seltsam ist, dass dies auf einem geschieht, klicken Sie auf Ereignis in einem input. Vielleicht meintest du die Änderung Ereignis? Oder sogar die keyup Ereignis?

Quelle

2016-08-30 19:07:15 David

Ich würde nur hinzufügen, dass, wenn Sie ein Ereignis auswählen, nach dem Sie suchen, wenn Sie sofortige Reaktion auf das erste Zeichen in der Eingabe möchten, können Sie keine Änderung verwenden. Das Änderungsereignis wird erst ausgelöst, wenn die Bearbeitung abgeschlossen ist (d. H. Der Fokus ist verloren gegangen). – DLH

Ich fügte die Bedingungsprüfung wie vorgeschlagen hinzu. Nun, was passiert ist, als ob Sie in Geige zeigen, sowohl Textfeld und Dropdown zeigt, wenn Formular geladen wird, aber wenn ich auf Textfeld klicke, verbirgt sich das Dropdown wieder. Ich muss das Dropdown nicht anzeigen, bis ich auf das Textfeld klicke, um den Wert einzugeben. Das Dropdown sollte nicht ausgeblendet werden, wenn ich versuche, einen Wert einzugeben. Irgendein Vorschlag? – TechPro

@TechPro: Style, damit es standardmäßig ausgeblendet wird. Entweder mit CSS oder einem Inline-Stil. Beispiel: '

Zeige Drop-Down, wenn das Textfeld einen Wert von

Antwort