时间戳

首页 > 解决方案 > JavaScript：3 个单选按钮，第 3 个有下拉菜单，当任何一个被选中时有提交按钮，然后给出消息

javascript - JavaScript：3 个单选按钮，第 3 个有下拉菜单，当任何一个被选中时有提交按钮，然后给出消息

问题描述

我有 3 个带有提交按钮的单选按钮。选择前两个无线电按钮并单击“提交”按钮时，它将给您留言。When the third radio button called "other" is selected you get a drop down box of 4 options. 从下拉框中选择一个并单击提交后，应该会出现一条消息，感谢您选择您选择的下拉项目。现在它正在出现，感谢您选择其他。

我尝试了几种不同的方法来做到这一点。按钮上附加了 if/else 语句，但它并没有一直起作用。创建第二个提交按钮，但这不是我想要的，我想使用相同的按钮。

任何帮助是极大的赞赏。谢谢。

(function () {
// ** Declare variables
    let form, options, other, otherText, hide, optionSelection;
    
// ** Get the form  
    form = document.getElementById('myForm');
    options = form.elements.heard;
    
// ** get the radio buttons next
    other = document.getElementById('other');
    otherText = document.getElementById('addSelect');
    otherText.className = 'hide';
  
// ** now in a loop add an event listener to each of the options - do not use the text book utilities
    for (let x=[0]; x < options.length; x++) {
		addEventListener('click', radioChanged);
	}

// ** select box array
    let array = ['Friend', 'Email', 'Career Fair', 'Referal'];

// ** create select box from array
    for (let y = 0; y < array.length; y++) {
        console.log(array[y]);
    };
    
    let selectChoice = document.createElement('select');
	selectChoice.setAttribute("id", "mySelect");
	addSelect.appendChild(selectChoice);
	
// ** create & append the options
	for (let z = 0; z < array.length; z++) {
		let option = document.createElement("option");
		option.setAttribute('value', array[z]);
		option.text = array[z];
		selectChoice.appendChild(option);
	}
	
// ** add an event listener that reports the result

// ***************************
// ** THIS IS WHAT THE DROP DOWN BOX ITEM SHOULD DISPLAY WHEN SUBMITTED

	mySelect.addEventListener('change', reportResult);
	function reportResult() {
		let optionResult = mySelect.value;
		console.log("Thank you for letting us know your other choice: " + optionResult);
// ***************************
	}
    
// write a function to check and see if the radio button selection has changed
// if other is selected, display the select dropdown; otherwise hide the select box
    function radioChanged() {
	  optionSelection = options.value;
		console.log(optionSelection);
		hide= other.checked ? '' : 'hide';
		otherText.className = hide;
		
// if other text is hidden, we already processed the value, delete it
		if (hide) {
			otherText.value = '';
		} 
  }
    
    let submitButton = document.getElementById("submit");
	submitButton.addEventListener("click", displayWelcome);
    
    function displayWelcome(e) {
		e.preventDefault();
		let welcomeMessage = document.getElementById("welcomemessage");		
		let radioDiv = document.getElementById("main");
		radioDiv.className = "hide";
		welcomeMessage.className = "";
// ***************************
// THIS IS WHAT SHOULD DISPLAY FOR THE FIRST 2 RADIO BUTTONS SUBMITTED
		welcomeMessage.textContent = "Thank you for choosing " + optionSelection;
// ***************************
	}
    
}());
<!DOCTYPE html>
<html>
  <head>
    <title>Problem2</title>
    <style>
		.hide {
			display: none;
		}
	</style>
  </head>
  <body>
	<div id = "main">
		<form id = "myForm">
			<fieldset>
				<legend>How did you hear of us?</legend>
				<input type="radio" name="heard" value="search" id="search">
				<label for="search">Search engine</label><br>
				<input type="radio" name="heard" value="print" id="print">
				<label for="print">Newspaper or Magazine</label><br>
				<input type="radio" name="heard" value="other" id="other">
				<label for="other">Other</label><br> <br><br> 
				<div id="addSelect" class="hide">Select Choices:</div>	<br><br>
				<input id="submit" type="submit" value="submit" />
			</fieldset>
        
		</form>
    </div><!-- main -->  
	<p id="welcomemessage" class="hide">Welcome!</p>	
    <script src="rockin.js"></script>
  </body>
</html>

标签： javascript

解决方案

这是我的解决方案：

    <!DOCTYPE html>
<html>
  <head>
    <title>Problem2</title>
    <style>
        .hide {
            display: none;
        }
    </style>
  </head>
  <body>
    <div id = "main">
        <form id = "myForm">
            <fieldset>
                <legend>How did you hear of us?</legend>
                <input type="radio" name="heard" value="search" id="search">
                <label for="search">Search engine</label><br>
                <input type="radio" name="heard" value="print" id="print">
                <label for="print">Newspaper or Magazine</label><br>
                <input type="radio" name="heard" value="other" id="other">
                <label for="other">Other</label><br> <br><br> 
                <div id="addSelect" class="hide">Select Choices:</div>  <br><br>
                <input id="submit" type="submit" value="submit" />
            </fieldset>

        </form>
    </div><!-- main -->  
    <p id="welcomemessage" class="hide">Welcome!</p>    
    <script>
        let form, options, other, otherText, hide, optionSelection;

    // ** Get the form  
        form = document.getElementById('myForm');
        options = form.elements.heard;

    // ** get the radio buttons next
        other = document.getElementById('other');
        otherText = document.getElementById('addSelect');
        otherText.className = 'hide';

        // ** select box array
        let array = ['Friend', 'Email', 'Career Fair', 'Referal'];

    // ** create select box from array
        for (let y = 0; y < array.length; y++) {
            console.log(array[y]);
        };

        let selectChoice = document.createElement('select');
        selectChoice.setAttribute("id", "mySelect");
        addSelect.appendChild(selectChoice);  

    // ** create & append the options
        for (let z = 0; z < array.length; z++) {
            let option = document.createElement("option");
            option.setAttribute('value', array[z]);
            option.text = array[z];
            selectChoice.appendChild(option);
        }     


    // ** now in a loop add an event listener to each of the options - do not use the text book utilities
        for (let x=[0]; x < options.length; x++) {
            addEventListener('click', radioChanged);
        }

        function radioChanged() {
                optionSelection = options.value;
                //console.log(optionSelection);
                hide= other.checked ? '' : 'hide';
                otherText.className = hide;

        // if other text is hidden, we already processed the value, delete it
                if (hide) {
                    otherText.value = '';
                } 
        }

        let submitButton = document.getElementById("submit");
        submitButton.addEventListener("click", displayWelcome);  

        function displayWelcome(e) {
            e.preventDefault();
            let welcomeMessage = document.getElementById("welcomemessage");     
            let radioDiv = document.getElementById("main");
            radioDiv.className = "hide";
            welcomeMessage.className = "";

            switch (optionSelection)
            {
                case "search":
                case "print":
                    welcomeMessage.textContent = "Thank you for choosing " + optionSelection;
                    break;
                case "other":
                    welcomeMessage.textContent = "Thank you for choosing " +selectChoice.options[selectChoice.selectedIndex].value;
                    break;
            }
        }


    </script>
  </body>
</html>

推荐阅读