Member Avatar for Vmailservice 
<script type="text/javascript">
var arr = [{
      val: 1,
      text: 'Option 1'
  }, {
      val: 2,
      text: 'Option 2'
  }];
  $(function () {
      $('a').click(function () {
          var sel = $('<select>').appendTo('body');
          $(arr).each(function () {
              sel.append($("<option>").val(this.val).text(this.text));
          });
          $('<br>').insertBefore(sel);
          $('<input/>').insertAfter(sel);
          return false;
      });
  });
</script>

</head>

<body>

<a href="">Add Select Box</a>
</body>

with is code when i click on anchor tag new selectbox appears....suppose if clicked on anchor tag 5 times then 5 new selectboxes will appear...now accordingly the selectbox that opens up has options option 1 and option 2 because i have written it above......now below is code that is having a selecbox that is fetching data from database

<script type="text/javascript">
$(function(){
      var items="";
      $.getJSON("index_two.php",function(data){
        $.each(data,function(index,item) 
        {
          items+="<option value='"+item.sno+"'>"+item.name+"</option>";
        });
        $("#a1_title").html(items); 
      });
    });



</script>

<select id="a1_title">
<option>Default</option>
</select>

and this selectbox is getting value from this page that is index_two.php

<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("mansi",$con);


$q = "select sno, name from register";
$sql = mysql_query($q);
$data = array();
while($row = mysql_fetch_array($sql, true)){
    $data[] = $row; 
};
echo json_encode($data);


?>

now i want to merge these two codes....what i want is that whenever i click on anchor tag a selectbox appears but with the values fetched from database....so how can i merge these two codes????

</head>

<body>

<a href="">Add Select Box</a>

</body>

  • 2 Contributors
  • 1 Reply
  • 151 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol 
<a href="#" class="addSelectBox">Add Select Box</a>
<div class="boxes"></div>

<script>
    $('.addSelectBox').click(function()
    {
        addBox();
    });

    function addBox()
    {
      var items;
      $.getJSON("index_two.php",function(data){
        items += '<select>';
        $.each(data,function(index,item) 
        {
          items+="<option value='"+item.sno+"'>"+item.name+"</option>";
        });
        items += '</select>';
        $('#boxes').append(items); 
      });

    }
</script>

That's the sort of thing you could tinker with.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.