2017-12-02 6 views
0

몇 가지 옵션이있는 드롭 박스가있는 양식이 있습니다. 보관 용 계정에서 선택한 값에 따라 단락을 변경하고 싶습니다. 즉, 선택한 값이 단락을 대체합니다. 예 : I는 가지고js의 드롭 박스에서 값을 선택한 후 단락을 변경하십시오.

<select name="howmanyno1" size=1> 
<option value=2 selected>2</option> 
<option value=3>3</option> 
<option value=4>4</option> 
<option value=5>5</option> 
</select> 
//somewhere below 
<p>number</p>` 

I 텍스트 필요가 "숫자"는 선택된 값이 상기 보관의 값을 선택한 후 교체 (2,3,4 또는 5-). 어떻게해야합니까? 감사합니다. .

답변

0
<select onchange="myFunction()" name="howmanyno1" id="mySelect"> 
<option value=2 selected>2</option> 
<option value=3>3</option> 
<option value=4>4</option> 
<option value=5>5</option> 
</select> 

<p id="demo">number</p>` 

<script> 
function myFunction() { 
    var x = document.getElementById("mySelect").value; 
    document.getElementById("demo").innerHTML = "You selected: " + x; 
} 
</script> 
0
<select name="howmanyno1" id="selectDiv" size=1 onchange="changePara()"> 
<option value=2 selected>2</option> 
<option value=3>3</option> 
<option value=4>4</option> 
<option value=5>5</option> 
</select> 
//somewhere below 
<p id="changed">number</p> 

JS 코드

function changePara(){ 
    var val = document.getElementById("selectDiv").value; 
    if(val == 2){ 
      document.getElementById("changed").innerHTML = "something"; 
    } 
    else if(val == 3){ 
      document.getElementById("changed").innerHTML = "something else"; 
    } 
    // and so on 
} 
0

JQuery와 기반 솔루션

id 당신의 <p> 요소에 추가

<p id="para">number</p> 

사용 jQuery를이 <p>

let updateText = function(e) { 
    $('#para').text("Selected item: " + select.val()) 
} 

의 텍스트를 업데이트하는 기능을 작성 <select> 상자

let select = $('select[name="howmanyno1"]') 

을 선택한 다음 select 상자가 change 이벤트

select.on('change', updateText) 
0

I을들을 수 있도록하는 이 솔루션이 유용 할 수 있기를 바랍니다.

var textBlocks = new Array( 
 
'Select from the list to change this box', 
 
'Text block two', 
 
'Text block three'); 
 

 
function changeText(elemid) { 
 
var ind = document.getElementById(elemid).selectedIndex; 
 
document.getElementById("display").innerHTML=textBlocks[ind]; 
 
}
</head><body> 
 

 

 
<select id="dropDown" onChange="changeText('dropDown');"> 
 
<option value="0">1</option> 
 
<option value="1">2</option> 
 
<option value="2">3</option> 
 
</select><br> 
 

 
<div id="display">Select from the list to change this box</div> 
 
</body></html>