So ändern Sie ein Textfeld sichtbar, je nachdem, welches Element ausgewählt ist, in einem Dropdown-Menü?

Ich habe ein drop-down-Menü mit einer Liste der Fächer in es, ist die Letzte option "Add New Thema", so dass, wenn der Benutzer wählt diese option, ich brauche ein Textfeld zu erscheinen.

Mein HTML-Formular sieht wie folgt aus: (ich habe nur die relevanten bits, es ist ein bisschen mehr Sachen drauf.

<form method="post" action="createQuestion.php" name="cq">
   <select name="subject" id="subject">
      <option value="biology">Biology</option>
      <option value="maths">Maths</option>
      <option value="economics">Economics</option>
      <option value="newSub" <?php if($subject == "newSub1") { echo "SELECTED"; } ?>> Add New Subject </option>
   </select> 
   <input type="text" name="newSubtxt" ID="newSubtxt" style="visibility:hidden">  
</form>

Habe ich Alter versuchen, diese arbeiten mit javascript, und das kann ich einfach nicht bekommen es überhaupt zu arbeiten.

Dies ist das js, das ich schrieb, funktioniert aber nicht

function addSubject(){
            newSub = document.getElementById('newSub').name
            selectedSubject = document.getElementById('subject').value
                if (selectedSubject == newSub){
                document.getElementById(newSubtxt).style.display = 'block';
            }}

Ich wäre so dankbar wenn mir jemand helfen könnte mit dem javascript-Code, so dass es funktionieren wird. Vielen Dank im Voraus 🙂

InformationsquelleAutor Alicia | 2011-10-29
  1. 4

    Ändern Sie Ihre unsichtbaren Eingang:

    <input type="text" name="newSubtxt" id="newSubtxt" style="display: none" />

    und Ihre js:

    function addSubject() {
    var selectedSubject = document.getElementById('subject').value;
    if (selectedSubject == 'newSub') {
        document.getElementById('newSubtxt').style.display = 'block';
    }
}

    Siehe auch meine jsfiddle.

    • Vielen, vielen Dank! es hat geklappt 🙂
    InformationsquelleAutor scessor
  2. 1

    Ändern Sie das Format der textbox mit 

    <input type="text" name="newSubtxt" ID="newSubtxt" style='display:none;'>

    Habe ich verwendet jQuery (javascript-Bibliothek), um Ihr problem zu lösen.

    $(document).ready(function () {
    $('#subject').change(function (){
    if($('#subject').val()=='newSub')
        $('#newSubtxt').show();
    else
        $('#newSubtxt').hide();
    });
});

    Siehe meine jsfiddle

    InformationsquelleAutor Mansoor Gee
Schreibe einen Kommentar