如何在焦点和焦点外为 <option> 设置不同的值 Javascript答案

【问题标题】：how to have different values for <option> on focus and off focus Javascript如何在焦点和焦点外为 <option> 设置不同的值 Javascript
【发布时间】：2017-02-04 18:33:21
【问题描述】：

这可能吗？：

我有：

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];
}
};

&lt;select id="select"&gt;&lt;/select&gt;

这向我展示了标题中定义的选项值。

当<select> 处于焦点时，应该向我显示标题中定义的完整值，而当 select 未处于焦点时，我希望它显示不同的东西，所以在这种情况下 option1 而不是 opt1（初学者）。

我尝试添加这个：

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

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

还尝试了 onchange 事件，但到目前为止没有任何效果。

这是fiddle

【问题讨论】：

不要使用外部小提琴，使用Stack Snippets
这样的？ jsfiddle.net/c52Lh5md/2
完全正确！，非常感谢，如果您将其发布为答案，我会接受它

标签： javascript html select option

【解决方案1】：

是的，这是可能的。使用 onblur 事件http://www.w3schools.com/jsref/event_onblur.asp。这是一个基于您的小提琴的示例：

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

【讨论】：

【解决方案2】：

这样的事情应该可以工作：

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];
}

&lt;select id="select"&gt;&lt;/select&gt;

【讨论】：

【解决方案3】：

你也可以尝试使用JQuery，如下：

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

【讨论】：