[英]Selecting a combination of options from drop-down menus to generate a result
通過從下拉列表中選擇一個選項,我設法生成了一段文本。 可以在此處找到用於此目的的Javascript代碼:
<script type="text/javascript">
function ShowDiv() {
safeToggleFieldDisplay(document.getElementById('one'), 'none');
safeToggleFieldDisplay(document.getElementById('two'), 'none');
safeToggleFieldDisplay(document.getElementById('three'), 'none');
var dropdown = document.getElementById("ContentListBox");
var index = dropdown.selectedIndex;
var selectedDIV = dropdown.options[index].value;
safeToggleFieldDisplay(document.getElementById(selectedDIV), 'flip');
}
function safeToggleFieldDisplay(field, sVisibility) {
try {
if ((field) && (field.style)) {
if (sVisibility == 'flip') {
if (field.style.display == 'none') {
sVisibility = 'block';
}
else {
sVisibility = 'none';
}
}
field.style.display = sVisibility;
}
}
catch (exception) {
//no handling - just preventing page explosions
}
}
下拉列表和示例內容的HTML代碼如下:
<select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();">
<option value="">Select Macronutrient</option>
<option value="one">Protein</option>
<option value="two">Carbohydrates</option>
<option value="three">Fats</option>
</select>
<div id="one" style="display:none;"> <br>
<img src="Protein.jpg" width="120" height="120" style="position: absolute; bottom: 15px; right: 30px;"/>
<b>About</b> <br>
➢ The most common macronutrient associated with fitness in general. <br>
➢ It repairs the body’s cells.<br>
➢ It forms many body structures, including muscles, skin, and hair.<br>
➢ It maintains and replaces tissues in your body.<br>
➢ It manufactures red blood cells to carry oxygen.<br>
➢ It manufactures antibodies to fight diseases<br>
<b>Examples</b><br>
➢ Lean meat and fish<br>
➢ Eggs and dairy<br>
➢ Beans, nuts, and seeds<br>
➢ Whey, soy, and plant protein supplements<br>
</div>
我的問題是,是否可以通過從多個下拉列表中選擇的選項組合來輸出特定文本。 例如,用戶可以從以下每個下拉列表中選擇一個選項,然后單擊“生成”以生成特定於他們選擇的選項組合的鍛煉計划:
<div class="margins1">
<h2>Goal</h2>
<select name = "goalDrop">
<option>Fat Loss</option>
<option>Lean Muscle</option>
<option>Size & Mass</option>
</select>
<h2>Current Level</h2>
<select name = "levelDrop">
<option>Beginner</option>
<option>Intermediate</option>
<option>Advanced</option>
</select>
<h2>Gym Accessibility</h2> <select name = "gymDrop">
<option>Access to Gym</option>
<option>No Access to Gym</option>
</select>
<h2>Days Per Week</h2> <select name = "weekDrop">
<option>3-Day Split</option>
<option>4-Day Split</option>
<option>5-Day Split</option>
</select></br>
</div>
<div id="generateworkoutplan">
<form action=>
<input type="submit" value="Generate" >
</form>
</div>
我一直在嘗試擴展我現有的解決方案來實現這一目標,但是這變得非常混亂。 有人可以建議我解決此問題的最佳方法/或提供某種代碼結構嗎? 請注意,我也使用phpmyadmin,所以也歡迎任何包含此功能的解決方案。 另請注意,閱讀我的代碼段時,您可能必須一直滾動到最右邊(由於某種原因,它無法正確格式化/縮進)。
非常感謝您的寶貴時間。
我將使用與三個下拉列表的串聯選擇相對應的ID。
偽代碼:
targetID = selectionA + selectionB + selectionC
因此,如果選擇值為“ AAB”,則應公開ID為“ AAB”的DIV。 給他們全部相同的班級名稱,按班級名稱隱藏它們,然后顯示與ID對應的名稱。
<div id="AAB" class="info">...</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.