JSFiddle - React, Tailwind, and code Playground

by ramstheroyal

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

<table><tr><td>
  <div id="drdn-box-srchpid" class="irmNDrdn">
      <div style="float:left; width:80%;">
          <input type="text" id="drdn-ip-srchpid" class="irmNDrdnInput"/></div>
     <div id="drdn-btn-srchpid" class="irmNDrdnBtn"><span><img src="drdn-btn.png"/></span></div>
     <div id="drdn-val-srchpid" class="irmNDrdnVal">
       <ul>
        <li>India </li>
        <li>United States of America</li>
        <li>Saudi Arabia</li>
        <li>Russia</li>
       </ul>
     </div>
  </div>

</td></tr></table>

CSS

body{
 font-size:0.75em;
 font-family:Arial,Tahoma,Sans-serif;
}


.irmNDrdn,.irmNDrdnVal {
 box-shadow:3px 3px 3px #888;
 }
 .irmNDrdn,.irmNDrdnInput{
  border-radius:4px;
 -moz-border-radius:5px;
 }

.irmNDrdnInput{
  padding-left:5px;
 }
.irmNDrdn
{
 border:1px solid black;
 width:500px;
 height:17px; 
 float:left;
}

.irmNDrdnInput{
  width:100%;
  height:90%;
  border:none;  
}

.irmNDrdnBtn{
 right:0px;
 top:0px;
 padding-top:1px;
 height:10%;
 float:right;
 display:table;
 width:10%;
}
.irmNDrdnBtn span{
 display:table-cell;
 vertical-align:middle;
 text-align:middle;

}
.irmNDrdnVal{
 width:100%;
 border-bottom:1px solid black;
 border-left:1px solid black;
 border-right:1px solid black;
 border-top:1px solid black;
 background:#fff;
 display:none;
 float:left;
}
.irmNDrdnVal ul{
 list-style:none;
 margin:0px;
 padding:0px;
}

.irmNDrdnVal ul li{
 padding:1px 1px 0px 5px;
 background:#FFF;
 cursor:default;
}

JavaScript

//Code for New irm dropdown box (Select box)
var drdnBoxId;
var drdnBtnId;
var drdnEleType;
var drdnEleId;
var drdnInputId;
var drdnValId;

//Open relevant value popup on Click on button
$('.irmNDrdnBtn').click(function(){
  drdnBtnId = $(this).attr("id");
  drdnEleId = drdnBtnId.split("-")[2];
  drdnValId = 'drdn-val-'+drdnEleId;
  drdnInputId = 'drdn-ip-'+drdnEleId;
  $('#'+drdnValId).slideDown(300);
});

//Change color of Value popup elements on mouse over
$('.irmNDrdnVal li').mouseover(function(){
 $(this).css({"background-color":"#ffff6f"})
});

$('.irmNDrdnVal li').mouseout(function(){
 $(this).css({"background-color":"#ffffff"})
});

//Get value of value list and fill input field with it  
$('.irmNDrdnVal li').click(function(){
 $('#'+drdnInputId).val($(this).text());
 $('#'+drdnValId).slideUp(300);
});

//Close all value popups when click is on document
$(document).click(function(event){
  var target = event.target;
  var targ = $(event.target).parent(".irmNDrdnBtn").attr("id");
  //alert(targ);
  if(target.nodeName!="IMG")
  {
   $('.irmNDrdnVal').slideUp(300);
  }

});