CODEWITHSUNDEEP
javascripthtmlhtml-select
Tom
Tom

Reputation: 2661

how to have different values for <option> on focus and off focus Javascript

Is this possible?:

enter image description here

I have:

var titles = ["opt1 (beginner)", "opt2 (intermediate)", "opt3 (prof)"]
var select = document.getElementById('select');
for (i = 0; i < titles.length; i++) {
  var option = document.createElement("option");
  option.textContent = titles[i];
  select.append(option);
}
select.options[select.selectedIndex].innerHTML = "option1"

select.onfocus = function(){
for (i = 0; i < titles.length; i++) {
  select.options[i].textContent = titles[i];
}
};
<select id="select"></select>

This shows me a with the option values defined in titles.

When <select> is on focus it, should show me the full values defined in titles, while, when select is not on focus I want it to show something different, so in this case option1 instead of opt1 (beginner).

I tried adding this:

select.options[select.selectedIndex].innerHTML = "option1"

select.onfocus = function(){
for (i = 0; i < titles.length; i++) {
  select.options[i].textContent = titles[i];
}
};

and also tried onchange events but nothing worked so far.

here's a fiddle

Upvotes: 1

Views: 811

Answers (3)

Marcos Jonatan Suriani
Marcos Jonatan Suriani

Reputation: 794

You could also try to use JQuery, as follows:

Javascript

var options = [
  {value: '1', off: 'Option 1', on: 'Opt 1'},
  {value: '2', off: 'Option 2', on: 'Opt 2'}];

$(function(){
    var $select = $('#dynamic-select');
    // create options
    $.each(options, function(index, elem) {
        $('<option>').val(elem.value).text(elem.off).appendTo($select);
    });

    $('#dynamic-select').focus(function(){
        // when focused, alternate text to property 'on'
        alternateText('on');
    }).blur(function(){
        // when blur occurs, alternate text to property 'off'
        alternateText('off');
    }).change(function(){ $select.blur();});
});

function alternateText(property) {
    $.each(options, function(index, elem) {
            $('#dynamic-select option:eq(' + (index+1).toString() + ')').text(elem[property]);
    });
};

HTML

<select id="dynamic-select">
    <option selected="selected">choose...</option>
</select>

Working JSFiddle

Upvotes: 0

Schlaus
Schlaus

Reputation: 19212

Something like this should work:

var titles = {
  'opt1 (beginner)' : 'option1',
  'opt2 (intermediate)' : 'option2',
  'opt3 (prof)' : 'option3'
};

var select = document.getElementById('select');

for (var title in titles) {
  var option = document.createElement("option");
  option.textContent = title;
  select.append(option);
}

select.onfocus = function() {
  var i = 0;
  for (var title in titles) {
    select.options[i++].textContent = title;
  }
}

select.onblur = function() {
  select.options[select.selectedIndex].innerHTML = titles[select.value];
}
<select id="select"></select>

Upvotes: 1

L L
L L

Reputation: 1470

Yes, this is possible. Use the onblur Event http://www.w3schools.com/jsref/event_onblur.asp. Here is an example based on your fiddle:

var titlesBlur = ["option 1", "option 2", "option 3"];
select.onblur = function(){
select.options[select.selectedIndex].innerHTML = titlesBlur[select.selectedIndex];
}

Upvotes: 1

Related Questions