CODEWITHSUNDEEP
javascriptjqueryhtml
Johny Bravo
Johny Bravo

Reputation: 424

Change selected option value in dropdown

My dropdown looks like,

    <select name="speed" id="ddlCustomer" class="form-control select-basic">
    <optgroup label="CustomerId&nbsp;&nbsp;OrderDate&nbsp;&nbsp;&nbsp;&nbsp;SupplyDate &nbsp;&nbsp;&nbsp;&nbsp;Supplier">
    <option value="1011_2">1011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-18 &nbsp;&nbsp;&nbsp;2015-12-22&nbsp;&nbsp;&nbsp;ABC</option>
        <option value="1011_2">1034&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-23 &nbsp;&nbsp;&nbsp;2015-12-28&nbsp;&nbsp;&nbsp;XYZ</option>
    </optgroup>
</select>

Currently the dropdown shows options like "1011 2015-12-18 2015-12-22 ABC", that is fine but when user selects an option, I need to show only "CustomerId" i.e, 1011 in this case.

Your help is really appreciated. Thanks

Added script for focusout

customSelect.focusout(function () {
                                customSelectOptions.each(function (options) {
                                    if ($(this).is(':selected')) {

                                        $(this).text($(this).attr('value').split('_')[0]);
                                        $(this).blur();
                                    }
                                });



                            });

Upvotes: 0

Views: 159

Answers (3)

Hemanth
Hemanth

Reputation: 203

    document.getElementById('#ddlCustomer').onchange = function() {

      var option = this.options[this.selectedIndex];
      option.setAttribute('data-text', option.text);
      option.text =$(this).val();

      // Reset texts for all other but current
      for (var i = this.options.length; i--; ) {
        if (i == this.selectedIndex) continue;
        var text = this.options[i].getAttribute('data-text');
        if (text) this.options[i].text = text;
      }
    };

Upvotes: 0

Hikmat Sijapati
Hikmat Sijapati

Reputation: 7004

Try like this.You have use regex with text value of selected option. 

   var ddlCustomer = document.querySelector('#ddlCustomer');
ddlCustomer.addEventListener('change',function(){
text = $(this).find("option:selected").text();
var value = text.match(/[0-9]+/);
$(this).find("option:selected").text(value);
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="speed" id="ddlCustomer" class="form-control select-basic">
    <optgroup label="CustomerId&nbsp;&nbsp;OrderDate&nbsp;&nbsp;&nbsp;&nbsp;SupplyDate &nbsp;&nbsp;&nbsp;&nbsp;Supplier">
    <option value="1011_2">1011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-18 &nbsp;&nbsp;&nbsp;2015-12-22&nbsp;&nbsp;&nbsp;ABC</option>
        <option value="1011_2">1034&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-23 &nbsp;&nbsp;&nbsp;2015-12-28&nbsp;&nbsp;&nbsp;XYZ</option>
    </optgroup>
</select>

See fiddle here https://jsfiddle.net/88cozeaz/1/

Upvotes: 1

LellisMoon
LellisMoon

Reputation: 5030

var states = [];
    var customSelect = $('#ddlCustomer');
    var customSelectOptions = customSelect.children().children();
    // Get each state then push them to the array
    // Initial state declaration
    customSelectOptions.each(function() {
        var state = $(this).text();
        states.push({ state: state });
        if ($(this).is(':selected')) {
            $(this).text($(this).attr('value').split('_')[0]);
        }
    });

    // On focus, always retain the full state name
    customSelect.on('focus', function() {

        customSelectOptions.each(function(index) {   
            $(this).text(states[index].state);
        });

        // On change, append the value to the selected option
        $(this).on('change', function() {

            customSelectOptions.each(function(options) {
                if ($(this).is(':selected')) {
                    $(this).text($(this).attr('value').split('_')[0]);
                }
            });

            // Un-focus select on finish
            $(this).blur();

        });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="speed" id="ddlCustomer" class="form-control select-basic">
    <optgroup label="CustomerId&nbsp;&nbsp;OrderDate&nbsp;&nbsp;&nbsp;&nbsp;SupplyDate &nbsp;&nbsp;&nbsp;&nbsp;Supplier">
    <option value="1011_2">1011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-18 &nbsp;&nbsp;&nbsp;2015-12-22&nbsp;&nbsp;&nbsp;ABC</option>
        <option value="1034_2">1034&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-23 &nbsp;&nbsp;&nbsp;2015-12-28&nbsp;&nbsp;&nbsp;XYZ</option>
    </optgroup>
</select>

Upvotes: 2

Related Questions