单击一个特定的单选按钮/选择选项后添加一个文本字段

Question

我想在单击一个特定的单选按钮或选择选项后添加一个文本输入

我有一个表单，其中有两个部分，其中单击“Sonstiges”（德语为“其他”）假设显示或添加附加文本输入，用户可以在其中为自己添加内容 我找不到解决方案。我能找到的唯一方法是通过 ajax 添加动态输入量。 但为此我只需要一个固定的金额。所以我想知道是否有更简单或更优雅的方法。

应该发生的地方

<h2>Problem & Geräteauswahl</h2>
        <?php

            //Einbinden der Datenbankverbindung
            include 'dbconfig.php';

            //Auslesen aller Gerätetypen
            $query = $db->query("SELECT * FROM typ ORDER BY name ASC");

            //Auslesen der Zeilen
            $rowCount = $query->num_rows;
        ?>  

            <label for='gtyp'> Gerätetyp:
            <select name = 'gtyp' id = 'gtyp'>
            <option>Bitte Auswählen</option>

        <?php
            if($rowCount > 0){
                while($row =  $query->fetch_assoc()){
                    echo '<option value="'.$row['typ_ID'].'">'.$row['name'].'</option>';
                }
            } else{
                echo '<option>Wenn sie das sehen, hat Chris seinen Job nicht gut gemacht</option>';
            }
            ?>
            <option>Sonstiges</option>
            </select>
            </label>

        <br>
            <label for = 'hers'> Hersteller:
            <select name = 'hers' id= 'hersteller'>
                <option>Bitte Gerätetyp wählen</option>
            </select>
            </label>
        <br>
            <label for = 'ger'> Gerätebezeichnung:
            <select name = 'ger' id= 'geraet'>
                <option>Bitte Hersteller wählen</option>
            </select>
            </label>

        <br>
        Add Testfield here
        <br>

和

<label for="problem">Problem auswählen<br>
            <input type="checkbox" name="problem" value="Seltsamer Geruch">Seltsamer Geruch
            <input type="checkbox" name="problem" value="Gerät zu Kalt">Gerät ist zu kalt<br>
            <input type="checkbox" name="problem" value="Seltsames Geräusch">Seltsames Geräusch
            <input type="checkbox" name="problem" value="Gerät zu warm">Gerät ist zu warm<br>
            <input type="checkbox" name="problem" value="Flüssigkeit">Flüssigkeit tritt aus
            <input type="checkbox" name="problem" value="Gerät springt nicht an">Gerät springt nicht an<br>
            <input type="checkbox" name="problem" value="Gerät dmpft">Gerät dampft
            <input type="checkbox" name="problem" value="Sonstiges">Sonstiges
        </label>
        <br>
        <br>
        Add Textfiel here
        <br>
        <br>

脚本：

$(document).ready(function(){
    $('#gtyp').on('change',function(){
        var gtyp = $(this).val();
        if(gtyp){
            $.ajax({
                type:'GET',
                url:'ajax.php',
                data:'typ_ID='+gtyp,
                success:function(html){
                    $('#hersteller').html(html);
                    $('#geraet').html('<option value="">Bitte Hersteller auswählen</option>'); 
                }
            }); 
        }else{
            $('#hersteller').html('<option value="">Bitte Gerätetyp asuwählen</option>');
            $('#geraet').html('<option value="">Bitte Hersteller auswählen</option>'); 
        }
    });

    $('#hersteller').on('change',function(){
        var her_id = $(this).val();
        var ger_id = $("#gtyp").val();

        if(her_id){
            $.ajax({
                type:'GET',
                url:'ajax.php',
                data: {
                    her_ID: her_id,
                    ger_typ: ger_id
                },
                success:function(html){
                    $('#geraet').html(html);
                }
            }); 
        }else{
            $('#geraet').html('<option value="">Bitte Hersteller auswählen</option>'); 
        }
    });
});

ajax.php

<?php

    //Einbinden der Datenbank
include 'dbConfig.php';

if(!empty($_GET["typ_ID"])){
    //besorgen aller relevanten Einträge aus Hersteller
    $query = $db->query("   SELECT * 
                            FROM hersteller 
                            INNER JOIN geraet ON geraet.hersteller = her_ID
                            WHERE geraet.typ = ".$_GET['typ_ID']."
                            GROUP BY name");

    //Anzahl der Ergebnisse
    $rowCount = $query->num_rows;

    $test = $_GET['typ_ID'];

    //Neuanlegen der Select Options
    if($rowCount > 0){
        echo '<option value="">Bitte Auswählen</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['her_ID'].'">'.$row['name'].'</option>';
        }
        echo '<option>Sonstiges</option>';
    }else{
        echo "<option value=''>Bitte Gerätetyp wählen</option>";
    }
}elseif(!empty($_GET["her_ID"])){
    //besorgen aller relevanten Einträge aus Geräte
    $query = $db->query("   SELECT * 
                            FROM geraet 
                            WHERE hersteller = ".$_GET['her_ID']."
                            AND typ = ".$_GET['ger_typ'].""
                            );

    $db->query("INSERT INTO test VALUES  ".$_GET['her_ID'].",".$_GET['ger_typ']."");

    //Anzahl der Ergebnisse
    $rowCount = $query->num_rows;
    //echo "<option> ".$_GET['her_ID'].",".$_GET['ger_typ']"";
    //Neuanlegen der Select Options
    if($rowCount > 0){
        echo '<option value="">Bitte Auswählen</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['ger_ID'].'">'.$row['bez'].'</option>';
            echo '<option>Sonstiges</option>';
        }
    }else{
        echo '<option value="">Bitte Hersteller wählen</option>';
    }
}
?>

Answer 1

您可以在您的选择下添加：

<input type="text" id="sonstiges" hidden>

在你的脚本中：

$('#gtyp').change(function(){
  var optionSelected = $('#gtyp option').filter(':selected').text();
  if(optionSelected == "Sonstiges"){
    $('#sonstiges').toggle();
  }
});