locked
Unable to clon the dropdown and set the value RRS feed

  • Question

  • User-571605279 posted

    Dear All,

    In my below code I have text area and drop-downs in html table.
    On my submit button I am trying to clone the row drop-down and set the value .

    Can any one please do let me know what's wrong in my below code.And why I am unable to set the value

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <style>
    textarea {
       resize: none;
    }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    
        <script type="text/javascript">
            function myFunction() {
    
            for (i = 0; i < 10; i++) {
                var txtHTML = "";
    
                var varlue = "Is an enumerated attribute indicating"
                
                 var btnEditvlaue="btnedit"+i
                 var btnEdit= '<input type="button" value="Edit" id="'+btnEditvlaue+'"  onclick="editcontrols(this)"  >';
                
                
                var txtparticipateidvalue = "employee" + i;
                var participateidvalue = '<textarea   id="' + txtparticipateidvalue + '"    rows="1" cols="30" wrap="Hard">' + varlue + '</textarea>';
                
                 var dropdownidvalue = "dropvalue" + i;
                 var dropdown = '<select  id="' + dropdownidvalue + '" ><option value="select">select</option></select>';
    
    
                var tr = $('<tr>');
                
                  var td = $('<td>');
                td.append(btnEdit);
                tr.append(td);
    
                var td = $('<td>');
                td.append(participateidvalue);
                tr.append(td);
                
                var td = $('<td>');
                td.append(dropdown);
                tr.append(td);
                
               
    
                $("#tblCustomListData > tbody").append(tr);
            }
            $("textarea").each(function () {
                var el = this;
                setTimeout(function () {
                    el.style.cssText = 'height:auto; padding:0';
                    el.style.cssText = 'height:' + (el.scrollHeight + 5) + 'px';
                }, 0)
            });
        }
        //
        
         $(document).on("keyup", "textarea", check)
    
    
          function check() {
            var el = this;
            setTimeout(function() {
              el.style.cssText = 'height:auto; padding:0';
              el.style.cssText = 'height:' + el.scrollHeight + 'px';
            }, 0);
          }
          
            function editcontrols(button)
            {
              debugger;
                  var row=$(button).closest('tr'),
                 select=row.find("select");
                 var idvalue=select.attr('id');
                 alert(idvalue);
                 $(idvalue).append($('#one').html());
                 document.getElementById(idvalue).value = "Volvo";
    
                 return false;
             }
          </script>
    </head>
    <body >
    <select id="1">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
      <button onclick="myFunction()">Try it</button>
     <table id="tblCustomListData" border="1" width="100%" style="overflow-x:auto;">
                  <thead>
                         <tr class="bgcolorgray">
                            <th>Sno</th>
                            <th>Dynamic dropdown</th>
                         </tr>
                    </thead>
                   <tbody>
         
                   </tbody>
                </table>
               
    </body>
    </html>

    Thursday, April 5, 2018 12:17 PM

Answers

  • User61956409 posted

    Hi,

    why I am unable to set the value

    In your code I can find that your <select> contains only one <option> in your table rows, if you’d like to set the value (and text) for that <option>, you can try to use the following jQuery code.

    function editcontrols(button) {
        debugger;
        var row = $(button).closest('tr'),
            select = row.find("select");
        var idvalue = select.attr('id');
        alert(idvalue);
    $(idvalue).append($('#one').html());
    
        $("#" + idvalue).find("option:first").text("Volvo");
        $("#" + idvalue).find("option:first").val("Volvo");
        //document.getElementById(idvalue).value = "Volvo";
    
        return false;
    }
    

    Test result:

    With Regards,

    Fei Han

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 6, 2018 6:30 AM

All replies

  • User61956409 posted

    Hi,

    why I am unable to set the value

    In your code I can find that your <select> contains only one <option> in your table rows, if you’d like to set the value (and text) for that <option>, you can try to use the following jQuery code.

    function editcontrols(button) {
        debugger;
        var row = $(button).closest('tr'),
            select = row.find("select");
        var idvalue = select.attr('id');
        alert(idvalue);
    $(idvalue).append($('#one').html());
    
        $("#" + idvalue).find("option:first").text("Volvo");
        $("#" + idvalue).find("option:first").val("Volvo");
        //document.getElementById(idvalue).value = "Volvo";
    
        return false;
    }
    

    Test result:

    With Regards,

    Fei Han

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 6, 2018 6:30 AM
  • User-571605279 posted

    Sir,

    Can you please help me in knowing y i am getting duplicate value , When I set the value.

    function editcontrols(button)
            {
                    debugger;
              var row = $(button).closest('tr'),
                  select = row.find("select");
              var idvalue = select.attr('id');
              alert(idvalue);
              
          	 $("#" + idvalue).append($('#1').html());
    
              $("#" + idvalue).find("option:first").text("Volvo");
             $("#" + idvalue).find("option:first").val("Volvo");
            //  document.getElementById("#" + idvalue).value = "Volvo";
    
              return false;
             }

    Friday, April 6, 2018 7:57 AM
  • User61956409 posted

    Hi,

    getting duplicate value , When I set the value

    Can you clarify more about your question?

    With Regards, 

    Fei Han

    Thursday, April 12, 2018 5:33 AM