如何在下拉列表中选择选项中显示数据

时间:2016-05-29 14:08:06

标签: javascript php jquery html drop-down-menu

从我的设备表中,我有设备ID,设备名称和图像ID,我的下拉列表当前显示相应的设备。如何显示与所选设备相对应的图像ID。我试过搞乱代码,但我仍然没有去哪里。

CircleImageView pic = (de.hdodenhof.circleimageview.CircleImageView)rootView.findViewById(R.id.picid);

1 个答案:

答案 0 :(得分:0)

选择select元素的'selectedIndex'属性。和...

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

----编辑

好。这又是你的Lotse。 :)

您可以将数据存储到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>

然后,现在你可以从jQuery的$ .data(key)函数中获取任何数据。

<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/