javascript - jQuery replace for the new select box only and not the earlier one -


i explain scenario. have website , trying collect "type of business" members in website. display existing businesses have been entered , allow user choose 1 of them. if user wishes enter "type of business", have allowed him choose, "**other". when clicks on "**other" box displayed in user enters "type of business" , gets added.

now if user has multiple business, allow him "add other". when clicks on "add other" again shown "type of business" including 1 entered earlier. if user chooses "**other" again - box displayed , when user enters "type of business" same displayed in earlier box , current box.

i want new value should replaced new select box , not earlier one. how make happen.

i have writed small php code similar. 

<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> function showfield(name){   if(name=='**other')  var oth_busi_type = prompt("please enter new county", "");     if (oth_busi_type != null) {                 $(var_1).append('<option selected="selected" value="'+oth_busi_type+'">'+oth_busi_type+'</option>');     }}  $(document).on('click', '.add-more', function() {             console.log($('.details:eq(0)').clone());                $('.details:eq(0)').clone(true).appendto('.details-parent'); }); </script> </head> <body> <div class="details-parent">     <div class="details">     <table class="extra_table" summary=""> <tr>     <td class="aligntop bold">*location:</td>     <td class="extra_field_input">          <select class='county' name='county'  id='var_1' onchange='showfield(this.options[this.selectedindex].value)' >                            <option value="select county..." selected="selected">select county...</option>               <option value="dodge" >dodge</option>               <option value="douglas" >douglas</option>               <option value="lancaster" >lancaster</option>               <option value="madison" >madison</option>               <option value="**other">**other</option>          </select>     </td> </tr> <tr>         <td class="aligntop bold extra" style="display:none;">**enter if **other</td>     <td class="extra_field_input">           <input style="display:none;" type="text" size="17" name="other_county" id="busi_type"  />     </td> </tr> </table> <div class="add-more">     <a href="#">add more</a>  </div>  </div>     </div>      </body> </html>

please find updated code below

i created 

<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready (function (e){     var details = $('.details:eq(0)').clone(true);     $(document).on ('change', '.county', function (e){         if ($(this).val() =='**other'){             var oth_busi_type = prompt("please enter new county", "");         }          if (oth_busi_type != null) {             $(this).append('<option selected="selected" value="'+oth_busi_type+'">'+oth_busi_type+'</option>');         }     });      $(document).on('click', '.add-more', function() {         console.log($('.details:eq(0)').clone());         $(details).clone(true).appendto('.details-parent');     }); }); </script> </head> <body> <div class="details-parent">     <div class="details">         <table class="extra_table" summary="">             <tr>                 <td class="aligntop bold">*location:</td>                 <td class="extra_field_input">                      <select class='county' name='county'  id='var_1' >                           <option value="select county..." selected="selected">select county...</option>                           <option value="dodge" >dodge</option>                           <option value="douglas" >douglas</option>                           <option value="lancaster" >lancaster</option>                           <option value="madison" >madison</option>                           <option value="**other">**other</option>                      </select>                 </td>             </tr>             <tr>                 <td class="aligntop bold extra" style="display:none;">**enter if **other</td>                 <td class="extra_field_input">                       <input style="display:none;" type="text" size="17" name="other_county" id="busi_type"  />                 </td>             </tr>         </table>         <div class="add-more">             <a href="#">add more</a>         </div>     </div> </div> </body> </html>

-

Comments

Post a Comment

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

i know it's possible put limit on file size content-length-range header. possible validate file type? https://docs.aws.amazon.com/amazons3/latest/dev/httppostforms.html#policyconditions i see there content-type header, if set say, audio/mp3 allow mp3 files , return error if file not mp3? i found previous question answers mention validating file size: s3 direct upload restricting file size , type you can specify content-type @ post request. you can specify @ signature, post must done content-type: { "expiration": "2007-12-01t12:00:00.000z", "conditions": [ {"acl": "public-read" }, {"bucket": "johnsmith" }, {"content-type: "audio/mp3"} ] } creating html form (using aws signature version 4) edit: @ previous question found, checking content-type.
Read more

c# - Check Keyboard Input Winforms -

i wondering if instead of doing this protected override void onkeydown(keyeventargs e) { if (e.keycode == keys.a) console.writeline("the key down."); } i set bool method , this: if(keydown(keys.a)) // whatever here i've been sitting here ages trying figure out how it. can't wrap head around it. in case wondering, plan call bool inside different method, check input. since want perform action after pressing key, using keydown event enough. but in cases suppose want check if specific key down in middle of process, can use getkeystate method way: [dllimport("user32.dll", charset = charset.auto, exactspelling = true)] public static extern short getkeystate(int keycode); public const int key_pressed = 0x8000; public static bool iskeydown(keys key) { return convert.toboolean(getkeystate((int)key) & key_pressed); } you should know, each time check key state using example iskeydown(keys.a) method returns true if ke...
Read more