CODEWITHSUNDEEP
jquery
FunkyOne
FunkyOne

Reputation: 51

Get id, or data-id value of bootstrap select object (not the ids of the options)

I have a dynamically constructed bootstrap-select object, with an id assigned.

However, when it comes to getting the value... I seem to be unable to return the id (or what becomes a data-id) value of the bootstrap-select object. (not talking about the id of the selected item here, but the bootstrap-seect object itself).

I can get the selected value easily enough with: $( this ).val();

Using query: $(this).data("id") appears not to work. Nor: $(this).attr('data-id').

I only get 'undefined'.

Any ideas?

Thanks

Edit 1:

Ok, so to attempt to clarify what I'm trying to do:

I first build the bootstrap-select object (which later gets applied to the DOM):

var slotNumberDescriber="slotNumber";
buildString+='<select class="selectpicker m3Select" id="'+slotNumberDescriber+'__TFUnitsSelect"><option value="Mins">Mins</option> <option value="Hours">Hours</option></select>';

The rendered HTML for the resulting bootstrap-object is:

<div style="width: 80px;" class="btn-group bootstrap-select m3Select"><button title="Mins" data-id="slotNumber__TFUnitsSelect" type="button" class="btn dropdown-toggle btn-xs" data-toggle="dropdown" role="button"><span class="filter-option pull-left">Mins</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div style="min-width: 0px;" class="dropdown-menu open" role="combobox"><ul class="dropdown-menu inner" role="listbox" aria-expanded="false"><li class="selected" data-original-index="0"><a aria-selected="true" aria-disabled="false" tabindex="0" class="" data-tokens="null" role="option"><span class="text">Mins</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a aria-selected="false" aria-disabled="false" tabindex="0" class="" data-tokens="null" role="option"><span class="text">Hours</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div><select tabindex="-98" data-style="btn-xs" data-width="auto" class="selectpicker m3Select" id="slotNumber__FUnitsSelect"><option value="Mins">Mins</option> <option value="Hours">Hours</option></select></div>

Later I wish to get both the selected value (which I can do), and the id of the bootstrap-select object (which so far I can't):

$("#SomeParentItem ).find('.m3Select').each(function( index ) {
            var val;
            var key;
            val = $(this).find("option:selected").text();   //this works fine
            key = $(this).data("id");    //this does not work  - produces undefined
            }

...this should set key = to the id that I set when I set up the bootstrap-select object initially('slotNumber__TFUnitsSelect'), but instead I get 'undefined'.

Thanks again.

Upvotes: 2

Views: 3332

Answers (1)

xploshioOn
xploshioOn

Reputation: 4125

See this as you are trying with a class, and see that your div and the select has the same class.

so work with a selector that find just the select, for example

 $("#SomeParentItem").find('select.m3Select').each(function( index ) {
      var val;
      var key;
      val = $("option:selected", this).text();
      key = $(this).attr("id"); 
    }

Upvotes: 1

Related Questions