在选择选项中显示部分值

Question

我有一个带有国家和代码的选择下拉菜单。在下拉选项中，为了用户体验和理解，我将显示国家名称以及国家代码。 作为一种正常功能，当用户从下拉列表中选择任何值时，该值会显示在输入中，如下所示

但是我希望只有国家代码应该像这样显示

我的部分代码

<select name="countrycode" class="form-control pf-country" id="countrycode">
    <option data-countryCode="IN" value="91">Code</option>
    <option data-countryCode="IN" value="91">India (+91)</option>
    <option data-countryCode="US" value="1">USA (+1)</option>
    <optgroup label="Other countries">
      <option data-countryCode="DZ" value="213">Algeria (+213)</option>
      <option data-countryCode="AD" value="376">Andorra (+376)</option>
    </optgroup>
</select>

完整代码可here

任何人都可以建议如何做到这一点。

Answer 1

据我了解，你可以试试这个。正如您在问题中提到的那样，此示例提供了准确的输出。

https://silviomoreto.github.io/bootstrap-select/examples/#selected-text

Answer 2

基本上我们正在尝试更改innerText 或selected-option。通过将onchange 事件侦听器添加到select 标签可以轻松实现。

但是有一个小问题，在更改innerText 时，我们失去了innerText 的先前值，@KKK 的解决方案解决了问题，但留下了这个小东西。

以下代码以完整的方式处理问题。我们正在添加 data-innerText 属性，之前的值为 innerText 和 id="previous" 以识别它。请检查此demo。

function simpleTweak(select){  

  var previouslySelectedTag = document.getElementById('previous');
  if(previouslySelectedTag!=undefined){  
    previouslySelectedTag.innerText = previouslySelectedTag.getAttribute('data-innerText');
    previouslySelectedTag.setAttribute('id','');
  }  

  var innerText = select.options[select.selectedIndex].innerText;
  select.options[select.selectedIndex].setAttribute('data-innerText',innerText);
  select.options[select.selectedIndex].setAttribute('id','previous');

  var value="(+"+select.options[select.selectedIndex].value+")";
  select.options[select.selectedIndex].innerText = value;
}

Answer 3

据我了解，您需要在选择选项后更改显示文本，是吗？如果是这样，您可以这样做。

您可以在onchange 事件中设置所选索引的文本。但是当您再次单击下拉菜单时，它将重置选项中的文本。如果您愿意，您可能需要将其改回。

function displayCountryCode() {
  var countrycode = document.getElementById("countrycode");
  countrycode.options[countrycode.selectedIndex].text = '+' + countrycode.value;
}

<select name="countrycode" class="form-control pf-country" id="countrycode" onchange="displayCountryCode()">
    <option data-countryCode="IN" value="91">Code</option>
    <option data-countryCode="IN" value="91">India (+91)</option>
    <option data-countryCode="US" value="1">USA (+1)</option>
    <optgroup label="Other countries">
      <option data-countryCode="DZ" value="213">Algeria (+213)</option>
      <option data-countryCode="AD" value="376">Andorra (+376)</option>
    </optgroup>
</select>

Answer 4

以下 JavaScript 代码将在您选择时更改所选选项的文本，并在您选择其他选项时将其更改回来。

它通过将国家名称和国家编号的值保存为 HTML5 数据属性 (option.dataset.countryName & option.dataset.countryNumber)

这样做，您不必更改您在帖子中提供的 HTML 格式。

我使用了 vanilla JavaScript，所以无论是否使用 jQuery，它都可以工作。

window.addEventListener('load', () => {
  let select = document.getElementsByName('countrycode')[0]
  let options = document.getElementsByTagName('option')

  for (let i = 1; i < options.length; i++) {
    let option = options[i]
    let matches =  option.innerText.match(/(.*?) (\(\+\d+\))/)
    option.dataset.countryName = matches[1]
    option.dataset.countryNumber = matches[2]

    // Set the value in the collection again now that the object has been changed
    options[i] = option
  }

  select.addEventListener('change', () => {
    for (let i = 1; i < options.length; i++) {
      let option = options[i];
      option.innerText = option.dataset.countryName + ' '
      option.innerText += option.dataset.countryNumber
    }

    let option = document.querySelector('option:checked')
    if (option !== options[0]) {
      option.innerText = option.dataset.countryNumber
    }
  })
})

还有一个演示at CodePen