Question

我想在html页面上放一个空选。当用户点击此选择时，我想从Web服务加载项目。我确实设法使用引导按钮，但没有基本的html选择。

Answer 1

从您的问题中得到的信息很少......但通常您可以使用AJAX调用来动态填写选项。

$("select").click(function(){
    $.getJSON(url, function(data){
        options = JSON.parse(data);
        $.each(options, function(index, value){
            $("<option/>").appendTo("select").val(value).append(value);
        });
    });
});

Answer 2

这是一个非常类似于建议的CodeAt30的解决方案，但没有jQuery依赖：

// fake web service
const getSelectOptions = () => new Promise((resolve, reject) => {
  resolve(['option 1','option 2', 'option 3', 'option 4']);
});

const populateWithOptions = () => {
  //abort if select box has already been populated
  if(document.querySelector('#s1 option')) return;
  
  const selectElement = document.querySelector('#s1');
  getSelectOptions().then(options => {
    options.forEach(option => {
      const optionElement = document.createElement('option');
      optionElement.value = option;
      optionElement.innerHTML = option;
      selectElement.appendChild(optionElement);
      }
     );
  });
};

const handleSelect = () => {
  const selectElement = document.querySelector('#s1');
  alert('user selected ' + selectElement.value);
}

window.populateWithOptions = populateWithOptions;
window.handleSelect = handleSelect;

<div>
  <select id="s1" onmouseover="populateWithOptions()" onclick="populateWithOptions()" onchange="handleSelect()">
  </select>
</div>

在下拉列表操作中填充从javascript中选择

2 个答案: