How to populate datalist inside HTML5?

Hi Experts, I want to populate datalist base on the var RX declared. I have three items that I want to populate it inside the Datalist. below is the code. All are inside the HTML. Any help please...

<!DOCTYPE HTML>
<html>
<head>
   
<script type="text/javascript">
    var RX = "Amoxicillin 500mg" + '\n' + "Cefalexin 250mg" + '\n' + "Cefuroxime 125mg";
</script>

</head>
   
<body>

<form>
<p>Datalist</p>
  <input list="Medicines" name="Anti-biotic">
  <datalist id="Medicines">
    <option value=RX>
  </datalist>
</form>
       
</body>
</html>
Whing Dela CruzAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
http://jsbin.com/hamolijopi/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
    $(function() {
    var rx = ["Amoxicillin 500mg", "Cefalexin 250mg", "Cefuroxime 125mg"];
    var option = '';
    for (i = 0; i < rx.length; i++) {
        option += '<option value="' + rx[i] + '">' + rx[i] + '</option>';
    }
    $('#Medicines').append(option);
});
  </script>
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
  <select id="Medicines"></select>
</body>
</html>

Open in new window

0
 
Whing Dela CruzAuthor Commented:
Hi scott Fell, its working. Could you provide me the code inside the  jquery specifically for this function. As I open the jquery huge of codes are there. I want to know what is specific function for this... Thanks!
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Jquery is very common in many sites.  Leave it in it's minimized form.   It does make it much easier for things like this.  But if you want pure js
http://jsbin.com/xanuzaquxi/2/edit
<!DOCTYPE html>
<html>
<head>

  <script>
 function start() {
 
    var rx = ["Amoxicillin 500mg", "Cefalexin 250mg", "Cefuroxime 125mg"];
    var option = '';
    for (i = 0; i < rx.length; i++) {
        option += '<option value="' + rx[i] + '">' + rx[i] + '</option>';
    }

   var select = document.getElementById('Medicines');
   select.innerHTML = select.innerHTML + option;
    }
  </script>
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body onload="start()">
  <select id="Medicines"></select>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
Whing Dela CruzAuthor Commented:
Thanks a lot Scott Fell, all are working.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.