gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:13:54 25 4
gpt4 key购买 nike

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

<!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>

最佳答案

我已经更正了您的 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>

关于javascript - 需要在下拉菜单中列出以在单击数字后显示结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26378705/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com