Как отобразить данные из опции выбора в раскрывающемся списке

Question

Из таблицы моего устройства у меня есть идентификатор устройства, имя устройства и идентификатор изображения, а в раскрывающемся списке отображаются соответствующие устройства. Как я могу отобразить идентификатор изображения, соответствующий выбранному устройству. Я попытался испортить код, но я все равно не буду.

<select class = "form-control" id="changeDevice" name="changeDevice" > 
    <option value= " -- select a device -- " disabled selected value> -- select a device -- </option> 
     <?php 
      foreach($device as $devicedrop){ 
      ?> 
      <option value="<?php echo $devicedrop['id'] ?>"> 
    <?php echo $devicedrop['name'] ?> </option> 
      <?php 
      } 
      ?> 
</select> 
    <input type = "text" id="text"></input> 
<script> 
    $('#changeDevice').find('option:selected').text(); 
    var text = $(this); 
    $('#text').prop(text); 
</script> 

Answer 1

принять свойство «selectedIndex» выбранного элемента. и ...

<script> 
    var device = $('#changeDevice'); 
    var selectedIndex = device.prop('selectedIndex'); 
    var text = $('option', device).eq(selectedIndex).text().trim(); 
    $('#text').val(text); 
</script> 

---- Редактировать

Ну. Это ты снова Лотсе. :)

Вы можете хранить ваши данные в DOM элемента (опция), как ...

<?php 
    $rows = ...; 
    foreach($rows as $row) { 
    printf('<option value="%d" data-image-id="%d" data-image-name="%s" data-device-name="%s">%s</option>', $row['id'], $row['image_id'], $row['device_name'], ...); 
    } 
?> 

этот код генерирует HTML, как

<select id="#device_option"> 
    <option value="1" data-image-id="32" data-image-name="sample-01.jpg" data-device-name="some name">...</option> 
    ... 
</select> 

тогда, теперь вы можете выбрать любые данные Функция $ .data (key) jQuery.

<script> 
    $(function() { 
    $('device_option').on('change', function() { 
     var options = $('option:selected', this); // take care when multiselect on 
     var val = $(this).val(); // or options.val() 
     var image_id = options.data('image-id'); 
     var image_name = options.data('image-name'); 
     var device_id = options.data('device-name'); 
     var text = options.text().trim(); 

     // you can poll data from DOM 

    }); 
    }); 
</script> 

http://www.w3schools.com/tags/att_global_data.asp

https://api.jquery.com/selected-selector/

https://api.jquery.com/data/