Question

我不知道javascript是如何工作的，但我能够通过从不同的网站复制来编写以下代码。

我的目标是拥有2个无线电盒（1 =印度，2 =非印度），如果选择了除印度以外，则会显示一个下拉框，其中显示所有国家/地区的名称。

从数据库中选择下拉列表，它是通过自定义php函数实现的。

我可以根据我的收音机选择框码显示代码。

我无法做到的事情如下：

我无法从下拉列表中选择任何值。
如果我更改了收音机框中的选项，我无法隐藏下拉菜单

以下是表单的代码：

<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
    <fieldset>
        <br />

        <script type="text/javascript">
            function onclickradio(entry){
                if (entry === true) {
                    alert("YOU HAVE CHOSEN INDIA");
                }
                else { 
                    document.getElementById('OTHER THAN INDIA').innerHTML = '</br><?php dropdown('country');?>';
                }
            }
        </script>

        Country: </br>
        <input onclick="onclickradio(document.getElementById('INDIA').checked);" id="INDIA" name="country" type="radio" checked="checked"/> INDIA
        <input onclick="onclickradio(document.getElementById('INDIA').checked);" id="OTHER THAN INDIA" name="country" type="radio"/> OTHER THAN INDIA

        <br /><br /><br />

        State: <input type="text" name="State" maxlength="30"/><br />
        Line1: <input type="text" name="Line1" maxlength="50" /><br />
        Line2: <input type="text" name="Line2" maxlength="50" /><br />
        City: <input type="text" name="City" maxlength="40" /><br />
        PIN Code: <input type="text" name="PIN_Code" maxlength="8" /><br />
        <input type="submit" name="submit_address" value="Submit Address" />
    </fieldset>
</form>

以下是自定义PHP下拉函数的代码：

<?php
    function dropdown($tablename) /*remember to add single quote around the input*/ 
    {
        $sql="SELECT * FROM ".$tablename;

        $result=mysqli_query($GLOBALS["connection"], $sql)
        or die('Error in running SELECT query');

        $options=""; //initialising the variable, so that it can be concatenated later

        while ($row=mysqli_fetch_array($result))
        {
            $x=0;   /*$x is the index of the field in a row (it has to start with $x=0;
                    because the first index is 0 in php*/ 

            $rowstr=" # ";  /*initialising the variable,
                            so that it can be concatenated later*/

            while ($x+1<=mysqli_num_fields($result))    /*mysqli_num_fields gives the actual number of fields, and not the index. 
                                                        Since the index starts with 0, it is to be incremented by 1 
                                                        before comparison with the mysqli_num_fields*/ 
            {
                $rowstr.= $row[$x]." # "; //concatenation operator
                $x=$x+1;
            }
            $options.="<option value=".$rowstr.">".$rowstr."</option>"; //concatenation operator
        }

        Echo "<select>".$options."</select>";
    }
?>

Answer 1

我想到的一些事情：

不要在id值中添加空格。我建议您也使用小写字母，这样您就可以使用“india”和“not-india”。
使用Firefox / Firebug或类似功能查看运行此错误时是否有任何JavaScript错误
考虑使用jQuery或类似方法来捕获更改事件 - 它易于使用，并使用向您的页面添加JS功能的“不显眼”方法。

Answer 2

元素的Id字段不能有空格。只需尝试删除"OTHER THAN INDIA"中的空格或替换为OTHER_THAN_INDIA

Answer 3

如果选择印度，则清除选择

function onclickradio(entry) {
    if(entry===true) {
        alert("YOU HAVE CHOSEN INDIA");
        document.getElementById('OTHER THAN INDIA').innerHTML = '';
    }
    else {
        document.getElementById('OTHER THAN INDIA').innerHTML = '<br/><?php dropdown('country');?>';
    }
}

Answer 4

试试这个：

$(document).ready(function() {
    // hide address inputs
    $('#address').hide();

    // show address inputs if the not india button is pressed
    $('#not-india').click(function() {
        $('#address').show();
    });

    // re-hide address inputs if india is selected
    $('#india').click(function() {
        $('#address').hide();
    });

});

您还必须在页面中包含jQuery。

小提琴：http://jsfiddle.net/EN4jB/6/

请注意我使用了以下标记 - 特别注意这个div的ID。

<input id="india" name="country" type="radio" checked="checked"/> India
<input id="not-india" name="country" type="radio" /> Not India

<br />

<div id="address">
<p><select>
    <option>USA</option>
    <option>UK</option>
    <option>Ireland</option>
    <option>etc...</option>
</select>
</p>

<p>State: <input type="text" name="State" maxlength="30"/></p>
<p>Line1: <input type="text" name="Line1" maxlength="50" /></p>
<p>Line2: <input type="text" name="Line2" maxlength="50" /></p>
<p>City: <input type="text" name="City" maxlength="40" /></p>
</div>

javascript中的PHP代码

4 个答案: