javascript - 是否可以在没有 JS 的情况下更改 `` 元素中的值和数据？

Question

所以..我想在输入中显示1，当我选择1时，是否可以不用Javascript？

代码:

                <div class="col-sm-12">
                    <div class="form-group">
                        <input list="browsers" class="form-control step1" name="test" id="test" />
                        <datalist id="browsers">
                            <option data-value="ONE">1</option>
                            <option data-value="TWO">2</option>
                        </datalist>
                    </div>
                </div>

JSFiddle

Answer 1

如果没有 JavaScript，你就无法做到这一点。但这里有一个使用 JS 的示例。

// Grab the options from the datalist
const options = document.querySelectorAll('datalist option');

// Create a dictionary object that maps
// the data value against the textContent
// { 1: 'ONE', 2: 'TWO' } 
const mapped = [...options].reduce((acc, c) => {
  acc[c.textContent] = c.dataset.value;
  return acc;
}, {});

// Grab the input and add a select handler
const input = document.querySelector('#test');
input.addEventListener('select', handleChange, false);

function handleChange(e) {

  // Change the input value to the value in the dictionary
  // based on the value of the selected option. `Object.key` ensures that
  // the input is one of the keys in the mapped object otherwise you'll
  // get errors
  if (Object.keys(mapped).includes(input.value)) input.value = mapped[e.target.value];
}

<div class="col-sm-12">
  <div class="form-group">
    <input list="browsers" class="form-control step1" name="test" id="test" />
    <datalist id="browsers">
     <option data-value="ONE">1</option>
     <option data-value="TWO">2</option>
   </datalist>
  </div>
</div>