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

基本上我们正在尝试更改innerText的{{1}}。通过向selected-option标记添加onchange事件侦听器，可以轻松实现此目的。

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

以下代码以完整的方式处理问题。我们正在添加innerText属性，其前一个值为data-innerText，另外还有innerText来识别它。请查看此demo。

id="previous"

Answer 2

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

您可以在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 3

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

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

Answer 4

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

通过将国家/地区名称和国家/地区编号的值保存为HTML5数据属性（option.dataset.countryName＆amp; 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

在选择选项中显示值的一部分

4 个答案: