dongwei9365 2016-05-29 06:08
浏览 109
已采纳

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

From my device table, I have device id, device name and image id and my drop down currently displays the the respective devices. How can I display the image id that is respective to the device selected on. I've tried messing around the code but I'm still going no where.

<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>
  • 写回答

1条回答 默认 最新

  • duancan7914 2016-05-29 06:14
    关注

    take 'selectedIndex' property of select element. and...

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

    ---- Edit

    Well. It's you again Lotse. :)

    You can store your data into DOM element (option) like...

    <?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'], ...);
      }
    ?>
    

    this code generate HTML as

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

    then, now you can pick up any data from jQuery's $.data(key) function.

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

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 vue请求不到数据,返回状态200,数据为html
  • ¥15 访问url时不会自动调用其 Servlet的doGet()
  • ¥15 用白鹭引擎开发棋牌游戏的前端为什么这么难找
  • ¥15 MATLAB解决问题
  • ¥35 哪位专业人士知道这是什么原件吗?哪里可以买到?
  • ¥15 关于#c##的问题:treenode反序列化后获取不到上一节点和下一节点,Fullpath和Handle报错
  • ¥15 一部手机能否同时用不同的app进入不同的直播间?
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部