iT邦幫忙

0

請問如可用javascript控制輸入欄位選項

請問如可用javascript寫出
1.下拉選 A --> 出現第二個下拉選項 1 ~ 3
2.下拉選 B --> 出現 輸入欄
3.下拉選 C --> 第二個下拉 及 輸入欄 恉隱藏

https://ithelp.ithome.com.tw/upload/images/20190708/20061271YNbTGzkBD8.jpg

froce iT邦大師 4 級 ‧ 2019-07-08 08:32:12 檢舉
可以啊,不過你寫死在前端有啥用處?
這個要跟後端做配合。
小魚 iT邦大師 1 級 ‧ 2019-07-08 10:50:25 檢舉
他可能是在練習.
當然這種東西是不能上檯面的.

2 個回答

0
ccutmis
iT邦高手 9 級 ‧ 2019-07-08 09:13:00

寫好玩的.../images/emoticon/emoticon82.gif
思路很簡單...
html頁面上有select_main跟select_sub跟input_sub,
一開始先用css的display:none;把select_sub跟input_sub,設為不顯示,
然後利用select_main的onchange事件函式當使用者有更動選項時,
依所選的結果來決定要顯示select_sub或input_sub或都不顯示。

<!doctype html>
<html>
<head>
<style>
body{margin:0;padding:0;}
#select_sub,#input_sub{display:none;}
</style>
</head>
<body>
<form name="form1" action="" method="POST">
<select id="select_main" name="select_main">
	<option value="">請選擇</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
</select>
<select id="select_sub" name="select_sub"></select>
<input id="input_sub" name="input_sub" value="" />
</form>
<script>
document.getElementById('select_main').onchange=function(){
	var select_sub=document.getElementById('select_sub'),input_sub=document.getElementById('input_sub');
	select_sub.style.display=input_sub.style.display='none';
	if(this.value=='A'){
		select_sub.style.display='inline-block';
		select_sub.innerHTML='<option value="">請選擇</option><option value="1">1</option><option value="2">2</option><option value="3">3</option>';
	}else if(this.value=='B'){
		input_sub.style.display='inline-block';
	}
};
</script>
</body>
</html>
小魚 iT邦大師 1 級 ‧ 2019-07-08 10:49:38 檢舉

乾脆像下面那位,
選項直接上就好了.
/images/emoticon/emoticon39.gif

ccutmis iT邦高手 9 級 ‧ 2019-07-08 11:01:19 檢舉

/images/emoticon/emoticon82.gif

joy036 iT邦研究生 4 級 ‧ 2019-07-09 10:15:22 檢舉

/images/emoticon/emoticon41.gif

4
dragonH
iT邦大師 1 級 ‧ 2019-07-08 09:33:42

codepen

html

<div class = "row mt-3">
  <div class = "col-sm-2 offset-sm-4">
    <select class = "form-control" id = "mySelect">
      <option value = "">---</option>
      <option value = "A">A</option>
      <option value = "B">B</option>
      <option value = "C">C</option>
    </select>
  </div>
  <div class = "col-sm-2">
    <select class = "form-control" id = "resultA">
      <option value = "">---</option>
      <option value = "1">1</option>
      <option value = "2">2</option>
      <option value = "3">3</option>
    </select>
    <input type = "text" class = "form-control" id = "resultB">
  </div>
</div>

js

const mySelect = document.getElementById('mySelect');
const resultA = document.getElementById('resultA');
const resultB = document.getElementById('resultB');
mySelect.addEventListener('change', (e) => {
  switch (e.target.value) {
    case 'A': {
      resultA.style.display = 'block';
      resultB.style.display = 'none';
      break;
    }
    case 'B': {
      resultA.style.display = 'none';
      resultB.style.display = 'block';
      break;
    }
    default: {
      resultA.style.display = 'none';
      resultB.style.display = 'none';
      break;
    }  
  }
});

其實沒什麼好說明的

就是根據選擇的內容

秀出相對應的結果

css 隱藏的部分我就沒貼出來了

joy036 iT邦研究生 4 級 ‧ 2019-07-09 10:16:20 檢舉

/images/emoticon/emoticon41.gif

我要發表回答

立即登入回答