Question

我试图弄清楚如何在女性部分＆＃34; 80-140＆＃34;中选择女性下拉框下面的文本框。在文本字段中，它应该是＆＃34;女性使用5 Iron＆＃34;为什么不在屏幕上显示？谢谢！几乎不可能找到解释这一点的在线教程。希望我正在解释它。如果你运行代码，它会更有意义。再次感谢！

<!DOCTYPE>

    <meta name="keywords" content="CIS 122" />
    <meta name="description" content="Examples of radio buttons, dropdown and function calls in JavaScript" />
    <style type="text/css">
        body{
            background-color: #93BACB;
            width: 800px;
            border: 1px solid #004343;
            margin: 25px auto;
            padding: 25px 25px 10px 25px;
            font-family: Times New Roman; serif;
        }
        h1{
            font-size: 24px;
            line-height: 26px;
            color: #004343;
            text-align: left;
            margin: 10px 0 0 0;
        }
        h2{
            font-size: 16px;
            line-height: 18px;
            color: black;
            text-align: left;
        }
        h3{
            font-size: 32px;
            line-height: 32px;
            color: black;
            text-align: center;
            margin: 0;
        }
        input{
            margin-top: 3px;
        }
        .lessonBlock{
            width: 400px;
            border: 1px solid #004343;
            margin: 25px auto 0;
            padding: 0 10px 10px;
            float: left;
        }
        ul{
            margin: 0;
        }
        li{
            list-style-type: none;
        }
        .clear{
            clear: both;
        }
    </style>


    <script language="javascript">
        function getButtonChoice()
        {
            for(var index = 0; index < document.radioTest.fred.length; index++)
            {
                if(document.radioTest.fred[index].checked == true)
                    var radioChoice = document.radioTest.fred[index].value;
            }
            document.radioTest.displayRadio.value = radioChoice;
        }

        function getDropdownChoice()
        {
            document.radioTest.displayDrop.value = document.radioTest.dropChoices.value;
        }

    </script>


<body>

    </div>
    <div class="clear"></div>


        <form name="radioTest">
            <input type="radio" name="fred" value="Clubs"  />Male<br />




 <select name="dropChoices" onchange="getDropdownChoice();">Friend
                <option></option>
                <option value=" Men use 5 Iron">140-170</option>
                <option value=" Men 6 Iron">130-160</option>
                <option value="Men use 7 Iron">120-150</option>

//男士下拉框的代码有效，所以只是想弄清楚为什么女性部分不会起作用。

            </select><br />
               <form name="radioTest">
<input type="radio" name="fred" value="Clubs"  />Female<br />
<select name"dropChoices" onchange="getDropdownChoice();">Friend  
                                <option></option>
                                <option value="Women use 5 Iron">80 - 140</option>
                                <option value="Women use 6 Iron">70- 130</option>
                                <option value="Women use 7 Iron">65 - 120</option>

//如何在下拉框下方的文本框中显示？我有男性工作。

            <input type="text" name="displayDrop" /> 
            <onclick="getButtonChoice();" 
        </form>
    </div>
    <div class="clear"></div>
</body>
</html>

Answer 1

我已更正您的HTML和JavaScript代码。请查看下面给出的代码部分。将HTML和脚本代码替换为下面给出的代码。此代码可以根据您的要求正常工作。

HTML代码 -

<body>
    <div class="clear"></div>
        <form name="radioTest">
            <input type="radio" name="fred" id="fred_male" value="Clubs"  />Male<br />

    <select name="dropChoices_male" id="dropChoices_male" onchange="getDropdownChoice();">Friend
                <option></option>
                <option value=" Men use 5 Iron">140-170</option>
                <option value=" Men 6 Iron">130-160</option>
                <option value="Men use 7 Iron">120-150</option>
                  </select><br />

               <form name="radioTest">
<input type="radio" name="fred" id="fred_female" value="Clubs"  />Female<br />
<select name="dropChoices_female" id="dropChoices_female" onchange="getDropdownChoice();">Friend  
                                <option></option>
                                <option value="Women use 5 Iron">80 - 140</option>
                                <option value="Women use 6 Iron">70- 130</option>
                                <option value="Women use 7 Iron">65 - 120</option>
                              </select><br />               
   <input type="text" name="displayDrop" onclick="getButtonChoice();" /> 

        </form>
    </div>
    <div class="clear"></div>
</body>

JavaScript代码 -

 <script language="javascript">
    var radioChoice;

    function getDropdownChoice()
    {     
            document.radioTest.displayDrop.value = '';
            if(document.getElementById("fred_male").checked)
            { 
                var e = document.getElementById("dropChoices_male");
                radioChoice = e.options[e.selectedIndex].value;
            }
            else if(document.getElementById("fred_female").checked)
            {
                var e = document.getElementById("dropChoices_female");
                radioChoice= e.options[e.selectedIndex].value;
            }
            else
            {
                radioChoice = '';
            }
    }
    function getButtonChoice() {
         document.radioTest.displayDrop.value = radioChoice;
    }
</script>

Answer 2

好吧没关系我用enter命中文本字段并显示答案是否有办法将答案显示为文本而不是文本字段？但这很有效。

在下拉菜单中需要列表以在单击数字后显示结果

2 个答案: