Search code examples
javascriptjquerybookmarklet

Bookmarklet dropdown with autocomplete


I need some js to build a bookmarklet in order to complete a form. Here goes the HTML:

<tr>
   <td>Gender</td>
    <td>
      <div class="select2-container select2-container-active" id="s2id_ContentPlaceHolder1_personDetails_genderDropDownList"> 
        <a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1"> 
            <span class="select2-chosen" id="select2-chosen-2">Select an Option</span> 
                <abbr class="select2-search-choice-close"></abbr> 
                    <span class="select2-arrow" role="presentation"> <b role="presentation"></b></span></a>
                        <label for="s2id_autogen2" class="select2-offscreen"></label> 
                            <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2" tabindex="0" autocomplete="Female">
      </div>
      <select name="_ctl0:ContentPlaceHolder1:personDetails:genderDropDownList" id="ContentPlaceHolder1_personDetails_genderDropDownList" onchange="nzis.UpdateDropdownErrorLabel(this)" errorlabel="mandatory" tabindex="-1" title="" style="display: none;">
         <option selected="selected" value=""></option>
         <option value="M">Male</option>
         <option value="F">Female</option>
      </select>
   </td>
</tr>

I tried with some JS without success. JS:

var index = document.getElementById('ContentPlaceHolder1_personDetails_genderDropDownList').selectedIndex;
    alert("value="+document.getElementById('ContentPlaceHolder1_personDetails_genderDropDownList').value);
    alert("text="+document.getElementById('ContentPlaceHolder1_personDetails_genderDropDownList').options[1].text);
s2id_autogen2.value= document.getElementById('ContentPlaceHolder1_personDetails_genderDropDownList').options[2].text;

Solution

  • Try to run the bookmarklet like this:

    javascript: (function() {
        var eltSelect = document.getElementById('ContentPlaceHolder1_personDetails_genderDropDownList');
        eltSelect.options[2].selected = true;
        eltSelect.onchange();
        s2id_autogen2.value = eltSelect.options[eltSelect.selectedIndex].text;
    })();