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

Question

我试图弄清楚如何在文本字段的“女性”部分中选择“ 80-140”时将其添加到女性下拉框下方的文本框中，它应显示为“女性使用5铁”，为什么？屏幕上没有显示吗？ 谢谢！ 几乎不可能找到解释这一点的在线教程。 希望我能解释正确。 如果运行代码，它将更有意义。 再次感谢！

<!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 个解决方案

解决方案1
0 已采纳 2014-10-15 11:37:38

解决方案2
0 2014-10-17 22:27:47

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-10-15 11:37:38

解决方案2 0 2014-10-17 22:27:47

解决方案1
0 已采纳 2014-10-15 11:37:38

解决方案2
0 2014-10-17 22:27:47