CODEWITHSUNDEEP
jquerydrupalhtml-select
arkjoseph
arkjoseph

Reputation: 494

Jquery form-select option menu doesn't work in ie8. HELP?

Thanks for all your help! Can someone test my code in IE8. My client has sent screenshots of the form-select menu and all the text seems to be getting coppied in the span.menuBg. I have done extensive testing in all versions of IE and I can't replicate the issue. I even tried vista ie8 and 7 ie8. (client is on win 7 ie8.)

EDIT: UPDATED

  $(".form-item:has('select')").each(function() {
     $(this).addClass('selector');
     $(this).find('select').css({opacity: 0});
  });

  $(".form-item").click(function() {
     var str = "";
     $("select option:selected",this).each(function() {
          str += $(this).text() + "";
      });
     $(".menuBg",this).text(str);
  });
  $('.form-item').trigger('click');

Source: http://api.jquery.com/selected-selector/ EDIT: okay now its working somewhat because on pages that have multiple .form-select the text() gets copied to other menus.

I am simply trying to insert the selected option into the span each time I click an 

<div class="form-item selector">
 <span class="menuBg"><!--Insert here--></span>
  <label for="edit-group-schedule-group-0-field-admin-schedule-status-value">
   Set status: 
  </label>
<select id="edit-group-schedule-group-0-field-admin-schedule-status-value" class="form-select" name="group_schedule_group[0][field_admin_schedule_status][value]" style="opacity: 0;"><option value="">- None -</option><option selected="selected" value="0">Pending</option><option value="1">Pre-approved</option></select>

Thanks for your responses so far but my current knowledge of jquery is limited so i need a little more help.

Also, many of my pages contain multiple select menus so I can't have it display the text in all the forms on the page.

an example of what I need is here: https://www.att.com/olam/passthroughAction.myworld?actionType=TvProductLandingPage&gnLinkId=s1003 on their pull down menu.

Upvotes: 0

Views: 788

Answers (2)

Baz1nga
Baz1nga

Reputation: 15579

I think he is trying to add a span when something in the dropdown is selected.. for that you need to bind a select event and in the callback function do the necessary.

Here is a fiddle for the same: http://jsfiddle.net/9ek7E/

Change it to this:

$(".form-select").change(function () {
  var str = "";
  str +=$(this).find("option:selected").text() + " ";
  $(".menuBg").text(str);
}) .trigger('change');

you need to use this keyword and also I simplified your code you dnt need to do each on the selected option since it is a single element. Here is an updated fiddle: http://jsfiddle.net/9ek7E/1/

Upvotes: 1

Mohsen
Mohsen

Reputation: 65855

Are you trying to disappear select element and replace it with selected option in a span after user selected the element? If that's right, here is a solution(fiddle):

HTML:

<div id="myDiv">
    <select class="mySelect">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

jQuery:

$('.mySelect').change(function(){
    var selectedOption = $(this).text();
   $('#myDiv').append($('<span/>').text(selectedOption ));
    $(this).hide();
})

Upvotes: 1

Related Questions