Выберите окно выбранное значение показать внутри DIV

Question

Код:

-> опция значения "ID", чтобы отобразить

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

<script> 
$("#price").change(function() { 
var id = $(this).children('option:selected').attr('id'); 
}); 
</script> 

<td> 
<select name="money" id="price" style="width: 100%"> 
<option value="Low" id="10">Low</option> 
<option value="Middle" id="30" >Middle</option> 
<option value="High" id="60" >High</option> 
<option value="Highest" id="100" >Highest</option> 
</select> 
</td> 
<td> 
<span id="price"></span> 
</td> 

Это не дает мне желаемых результатов.

Answer 1

Говорить «код не работает» абсолютно ничего не делает. Хорошо работает для меня, here it is as a fiddle.

$("#price").change(function() { 
 
    var id = $(this).children('option:selected').attr('id'); 
 
    $("#priceDisplay").append("<p>Price chosen: "+id+"</p>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td> 
 
    <select name="money" id="price" style="width: 100%"> 
 
    <option value="Low" id="10">Low</option> 
 
    <option value="Middle" id="30">Middle</option> 
 
    <option value="High" id="60">High</option> 
 
    <option value="Highest" id="100">Highest</option> 
 
    </select> 
 
</td> 
 
<td> 
 
    <span id="priceDisplay"></span> 
 
</td>

отредактирован, чтобы включить JQuery, как указано. Отредактировано во второй раз, чтобы изменить имя диапазона и добавить информацию в этот интервал каждый раз, когда выбран выбор.

Answer 2

Возможно, вы захотите показать результат?

$("#price").change(function() { 
var id = $(this).children('option:selected').attr('id');  
console.log(id); 
$("#showprice").html(id); 
}); 

<span id="showprice"></span>