如何将输出值显示为文本？

Question

In this code below, after make your selection the result value display as a pop-up window. How can i change it to display as a text near the second select list?

Here is the fiddle: https://jsfiddle.net/ajolnir/dw0hd8zn/

  var countrieslist=document.classic.countries var citieslist=document.classic.cities var cities=new Array() cities[0]="" cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"] cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"] cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"] function updatecities(selectedcitygroup){    citieslist.options.length=0    if (selectedcitygroup>0){        for (i=0; i<cities[selectedcitygroup].length; i++)            citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])    } } 

  <form name="classic"> <select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px"> <option selected>Select A City</option> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="uk">United Kingdom</option> </select> <select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)"> </select> </form> 

Answer 1

alert() replaced by innerHTML (where the span #result is the target)

  var countrieslist=document.classic.countries var citieslist=document.classic.cities var cities=new Array() cities[0]="" cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"] cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"] cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"] function updatecities(selectedcitygroup){ citieslist.options.length=0 if (selectedcitygroup>0){ for (i=0; i<cities[selectedcitygroup].length; i++) citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1]) } } function showresult(key) { document.getElementById("result").innerHTML = key; } 

 <form name="classic"> <select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px"> <option selected>Select A City</option> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="uk">United Kingdom</option> </select> <select name="cities" size="4" style="width: 150px" onClick="showresult(this.options[this.options.selectedIndex].value)"> </select> </form> <span id=result style="font-size: 2em;"><span> 

Answer 2

try this. add jquery onlie to your html.I updated your fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form name="classic">
<select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>Select A City</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
 
<select id="sone" name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
<h3 id="displayme">show me</h3>

</form>
 
<script type="text/javascript">
 
var countrieslist=document.classic.countries
var citieslist=document.classic.cities
 
var cities=new Array()
cities[0]=""
cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"]
 
function updatecities(selectedcitygroup){
    citieslist.options.length=0
    if (selectedcitygroup>0){
        for (i=0; i<cities[selectedcitygroup].length; i++)
            citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
    }
}
 
</script>

then write thei inside <script>

$(document).ready(function(){
    $("#sone").on('change',function(){
    var selected = $(this).val();
    $("#displayme").text(selected);
  });
});

jsfiddle : https://jsfiddle.net/dw0hd8zn/2/