How to insert tag inside

Question

I want to display an image file from the data I passed from Controller to JSP.

For example, when you send the following value from JSP,

{selectDoctor=[{d_name=MyName, d_imageServerPath=/boardFile/014e40e0ea.PNG, d_imagePath=C:/rachel/014e40e0ea.PNG, di_idx=2, d_imageOriginalName=testImage.PNG, d_idx=2, d_medicalInformation=valuevalue}]}

I have been able to display the value outside the tag through the statement.

<c:forEach items="${selectDoctor}" var="sD">
    <select>
        <option value="">Choice Doctor</option>
        <option value="${sD.d_idx}"><img src="${sD.di_imageServerPath}></img>${sD.d_name}</option>
    </select>
</c:forEach>

But unlike my expectations, the img tag does not work.

How do I insert the tag inside the tag?

https://stackoverflow.com/questions/32847952/how-to-add-an-image-in-select2-options check this out — Prateik Darji, Dec 11 '17 at 06:57
You can use jQueryUI - SelectMenu. You can refer to this link: https://stackoverflow.com/a/2966006/8944409 — Tanvi Surve, Dec 11 '17 at 07:00
You let me know what I do not know. Thank you very much. @Prateik — Seongwon-Choi, Dec 11 '17 at 07:01

score 2 · Accepted Answer · answered Dec 11 '17 at 07:01

Source Link http://jqueryui.com/selectmenu/#custom_render

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
      _renderItem: function( ul, item ) {
        var li = $( "<li>" ),
          wrapper = $( "<div>", { text: item.label } );
 
        if ( item.disabled ) {
          li.addClass( "ui-state-disabled" );
        }
 
        $( "<span>", {
          style: item.element.attr( "data-style" ),
          "class": "ui-icon " + item.element.attr( "data-class" )
        })
          .appendTo( wrapper );
 
        return li.append( wrapper ).appendTo( ul );
      }
    });
 
    $( "#filesA" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons" );
 
    $( "#filesB" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons customicons" );
 
    $( "#people" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget")
        .addClass( "ui-menu-icons avatar" );
  } );
  </script>
  <style>
    h2 {
      margin: 30px 0 0 0;
    }
    fieldset {
      border: 0;
    }
    label {
      display: block;
    }
 
    /* select with custom icons */
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
      padding: 0.5em 0 0.5em 3em;
    }
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
      height: 24px;
      width: 24px;
      top: 0.1em;
    }
    .ui-icon.video {
      background: url("images/24-video-square.png") 0 0 no-repeat;
    }
    .ui-icon.podcast {
      background: url("images/24-podcast-square.png") 0 0 no-repeat;
    }
    .ui-icon.rss {
      background: url("images/24-rss-square.png") 0 0 no-repeat;
    }
 
    /* select with CSS avatar icons */
    option.avatar {
      background-repeat: no-repeat !important;
      padding-left: 20px;
    }
    .avatar .ui-icon {
      background-position: left top;
    }
  </style>
</head>
<body>
 
<div class="demo">
 
<form action="#">
  <h2>Selectmenu with custom avatar 16x16 images</h2>
  <fieldset>
    <label for="people">Select a Person:</label>
    <select name="people" id="people">
      <option value="1" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option>
      <option value="2" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Tauren Mills</option>
      <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">Jane Doe</option>
    </select>
  </fieldset>
</form> 
</div>  
</body>
</html>

What you wrote is what I wanted. – Seongwon-Choi Dec 11 '17 at 07:05 — Seongwon-Choi, Dec 11 '17 at 07:05
Happy Coding @Seongwon-Choi – Ganesh Putta Dec 11 '17 at 07:11 — Ganesh Putta, Dec 11 '17 at 07:11

score 1 · Answer 2 · answered Dec 11 '17 at 06:59

1

You cannot insert tag within <option>.Options tags cannot contain any other tags. Try to build you own dropdown using <dd> <dl> tags.

answered Dec 11 '17 at 06:59

MUT

576
3
18

Those tags are known as HTML5 tags. It's allright?? – Seongwon-Choi Dec 11 '17 at 07:07

score 1 · Answer 3 · answered Dec 11 '17 at 07:06

1

The easiest way to achieve this is to use Select2 plugin of jQuery it provides even more facilities you can check the link for documentation

answered Dec 11 '17 at 07:06

Prateik Darji

2,297
1
13
29

There are too many ways. I do not know what to choose, and I am sorry that I did not think of many of these methods. – Seongwon-Choi Dec 11 '17 at 07:09
1

simple you can choose the method with which you like to work :-) – Prateik Darji Dec 11 '17 at 07:11
1

I have really broadened your choices. Thank you. – Seongwon-Choi Dec 11 '17 at 07:12

How to insert tag inside tag?

3 Answers3

How to insert tag inside