javascript - 从下拉列表中选择一个名称，或者如果不退出，可以在文本框中写入

Question

我有一个下拉列表和一个文本框。下拉列表中有动物的名称。问题是，下拉列表中可能没有可供选择的名称，因此当请求的名称不存在时，用户应该在选中复选框后在文本框中键入他/她最喜欢的动物(当选中复选框时，下拉列表应该被禁用，并且当未选中复选框时应被禁用)。最后一步，将下拉列表或文本框的值发送到数据库。

<form name="f" action="" method="post">
echo"choose an animal".'<br/>';
echo '<select name="animals">';
echo'<option> bear </option>';
echo'<option> cat </option>';
echo'<option> lion </option>';
echo'<option> monkey </option>';
echo'</select>';

echo"or write if is not in list".'<br/>';
echo'<input type="checkbox" name="checkbox">';
echo'<input type="textbox" name="animals">';
echo'<input type="submit" name="submit" value="submit">';
</form>
if(isset($_POST['submit']))
{
    $db_host = 'localhost';
    $db_name= 'site';
    $db_table= 'animals';
    $db_user = 'root';
    $db_pass = '';


    $con = mysql_connect($db_host,$db_user,$db_pass) or die("خطا در اتصال به پايگاه داده");
    $selected=mysql_select_db($db_name, $con) or die("خطا در انتخاب پايگاه داده");

    $ins = "INSERT INTO $db_table (animal_name) 
            VALUES ('" . mysql_escape_string($_POST['animals']) . "')";
    $saved=mysql_query($ins );

    mysql_close($con); 
}

Answer 1

<?php
    echo"choose an animal".'<br/>';
    echo '<select name="animals" id="animalDropdown">';
    echo'<option> bear </option>';
    echo'<option> cat </option>';
    echo'<option> lion </option>';
    echo'<option> monkey </option>';
    echo'</select>';

    echo"or write if is not in list".'<br/>';
    echo'<input type="checkbox" name="checkbox" id="checkbox" onclick="onClickCheckbox()">';
    echo'<input type="textbox" name="animalstext" id="animals">';
    ?>

    <script>
    onClickCheckbox();

    function onClickCheckbox( )
    {
        if( document.getElementById("checkbox").checked == true )
        {
            document.getElementById("animalDropdown").disabled = true;
            document.getElementById("animals").disabled = false;
        }
        else
        {
            document.getElementById("animalDropdown").disabled = false;
            document.getElementById("animals").disabled = true;
        }
    }
    </script>

这完成了事件/非事件的工作。使用其余的 PHP 代码将数据插入数据库。顺便说一句，我想您还需要一个提交按钮。