第三十章 处理表单

JavaScript

以 HTML 编写的表单允许用户使用文本框、复选框、单选按钮和滑块等各个部分输入信息。通过使用 JavaScript，您可以获取在表单的每个部分中输入的值并设置该值。在这里，我们将解释如何使用 JavaScript 操作在表单中准备的每个部分。

目录

30-1 使用 JavaScript 获取和设置文本框值
30-2 使用 JavaScript 获取和设置文本区域的值
30-3 使用 JavaScript 获取和设置复选框值
30-4 使用 JavaScript 获取和设置单选按钮值
30-5 使用 JavaScript 获取和设置下拉菜单值
30-6 使用 JavaScript 获取和设置滑块的值
30-7 使用 JavaScript 获取和设置在颜色选择器中选择的颜色的值
30-8 使用JavaScript获取和设置在文件选择对话框中选择的文件的信息

30-1 使用 JavaScript 获取和设置文本框值

我将解释如何从 JavaScript 获取和设置在表单中可用的文本框中输入的值。文本框提供单行输入区域，用于输入姓名和年龄等内容。要显示文本框，请在输入元素的类型属性中指定文本。

在 HTML 中创建一个文本框

要以 HTML 格式显示文本框，请在输入元素的类型属性中指定文本。

<input type="text">

幅を指定するには size 属性、 初期値を指定するには value 属性に値を設定します。

<input type="text" size="40" value="输入名称">

与 label 元素结合，在文本框前面显示一个标签。

<label>名前：<input type="text" size="40" value="输入名称"></label>

获取和设置文本框的值

要获取文本框的值，请参考表示输入元素的 HTMLInputElement 对象的 value 属性。格式如下。

element.value

比如获取id属性值为mytext的文本框输入的值，写法如下。

let element = document.getElementById('mytext');
console.log(element.value);

还可以通过为 value 属性分配一个值来在文本框中设置一个值。

let element = document.getElementById('mytext');
element.value = 'Hello';

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<p>
<label>名字：<input type="text" id="nameText"></label>
<input type="button" value="Check" id="checkButton">
</p>

<p id="msg"></p>

<script>
function butotnClick(){
  msg.innerText = '你的名字是' + nameText.value + '。';
}

let nameText = document.getElementById('nameText');
nameText.value = '姓名';
let msg = document.getElementById('msg');

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

文本框的初始值是通过为 value 属性分配一个值来设置的。在文本框中输入名称，点击按钮，使用value属性获取文本框的值，并显示在屏幕上。

文本框事件处理

在文本框中输入文本后，当按下 Enter或Tab键更改焦点时会触发 change 事件。每次在文本框中键入一个字符时都会触发一个输入事件。

如果要使用change事件，就这样写。

<label>姓名：<input type="text" id="nameText"></label>

<script>
function inputChange(){
    // 事件发生时处理
}

let nameText = document.getElementById('nameText');
nameText.addEventListener('change', inputChange);
</script>

如果要使用输入事件，就这样写。

<label>姓名：<input type="text" id="nameText"></label>

<script>
function inputChange(){
    // 事件发生时处理
}

let nameText = document.getElementById('nameText');
nameText.addEventListener('input', inputChange);
</script>

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<p>
<label>名字：<input type="text" id="nameText"></label>
</p>

<p id="msg"></p>

<script>
function inputChange(event){
  msg.innerText = '你的名字是' + nameText.value + '。';
}

let nameText = document.getElementById('nameText');
nameText.addEventListener('change', inputChange);
let msg = document.getElementById('msg');
</script>

</body>
</html>

在文本框中输入名称，按回车键，得到文本框的值，并显示在屏幕上。

这次我使用了 change 事件，所以事件只会在输入名称时触发。

30-2 使用 JavaScript 获取和设置文本区域的值

我将解释如何从 JavaScript 获取和设置在表单中可用的文本区域中输入的值。文本区提供多行输入区，用于输入长文本，如查询或产品评论。使用 textarea 元素显示文本区域。

在 HTML 中创建文本区域

使用 textarea 元素以 HTML 格式显示文本区域。

<textarea></textarea>

为 cols 属性设置值以指定宽度，为 rows 属性设置值以指定行数。如果要设置初始值，请在 <textarea> 和 </textarea> 之间输入。

<textarea cols="40" rows="5">Hello</textarea>

结合 label 元素在文本区域前显示一个标签。

<label>告诉我们你的想法<textarea rows="5"></textarea></label>

要更改标签相对于文本区域的位置，请使用 CSS 为文本区域设置垂直对齐属性的值。

<label>让我们知道您的想法<textarea rows="5" style="vertical-align:top;"></textarea>
</label>

获取和设置文本区域值

要获取文本区域的值，请参考表示文本区域元素的 HTMLTextAreaElement 对象的值属性。格式如下。

element.value

比如获取id属性为mytextarea的文本区域输入的值，写法如下。

let element = document.getElementById('mytextarea');
console.log(element.value);

您还可以通过为 value 属性分配一个值来在文本区域中设置一个值。

let element = document.getElementById('mytextarea');
element.value = 'Hello';

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<label>想法：<br>
<textarea cols="40" rows="5" id="reviewTextarea"></textarea>
</label>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<p id="msg"></p>

<script>
function butotnClick(){
  msg.innerText = reviewTextarea.value;
}

let reviewTextarea = document.getElementById('reviewTextarea');
reviewTextarea.value = '让我们知道你的想法';
let msg = document.getElementById('msg');

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

文本区域的初始值是通过为 value 属性分配一个值来设置的。在文本区域输入你的印象，点击按钮，使用value属性获取文本区域的值，并显示在屏幕上。

文本区域事件处理

在文本区域中，当您在输入完文本后按Tab键时，当焦点移动到另一个区域时会发生 change 事件。每次在文本区域中输入字符时都会触发输入事件。

如果要使用change事件，就这样写。

<textarea id="reviewArea"></textarea>

<script>
function inputChange(){
    // 事件发生时处理
}

let reviewArea = document.getElementById('reviewArea');
reviewArea.addEventListener('change', inputChange);
</script>

如果要使用输入事件，就这样写。

<textarea id="reviewArea"></textarea>

<script>
function inputChange(){
    // 事件发生时处理
}

let textarea = document.getElementById('textarea');
textarea.addEventListener('input', inputChange);
</script>

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<label>想法：<br>
<textarea cols="40" rows="5" id="reviewTextarea"></textarea>
</label>
</div>

<p id="msg"></p>

<script>
function inputChange(event){
  msg.innerText = reviewTextarea.value;
}

let reviewTextarea = document.getElementById('reviewTextarea');
reviewTextarea.addEventListener('change', inputChange);
let msg = document.getElementById('msg');
</script>

</body>
</html>

在文本区输入你的印象，按Tab键得到文本区的值并显示在屏幕上。

由于这次我们使用了 input 事件，因此只有在文本区域输入完成时才会触发该事件。

将文本区域中的换行符转换为

如果在 textarea 中输入包含换行符的值，则在使用 value 属性检索该值时将按原样获取换行符。如果要将获取的值设置为innerText属性，它会自动转换，但在某些情况下需要将换行符转换为<br>。

要将文本区域中获得的换行符转换为 <br>，请执行以下操作。

let textarea = document.getElementById('textarea');
let text = textare.value;

let textArray = text.split('\n');
let newText = textArray.join('<br>');

引用value属性获取到文本区域中输入的值后，使用split方法将字符串按换行符拆分，得到一个数组，将每个数组作为一个元素存储。这次我们通过使用 join 方法将数组的每个元素与 ‘<br>’ 作为分隔符连接起来得到一个字符串。这会将原始字符串中的任何换行符转换为“<br>”。

※ JavaScript 的替换方法只替换它找到的第一个替换目标。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<label>想法：<br>
<textarea cols="40" rows="5" id="reviewTextarea"></textarea>
</label>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
  let text = reviewTextarea.value;
  console.log(text.split('\n').join('<br>'));
}

let reviewTextarea = document.getElementById('reviewTextarea');

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

. 当你在文本区域输入印象并点击按钮时，通过 value 属性获取文本区域的值，将换行符转换为 <br> 后输出到控制台。

30-3 使用 JavaScript 获取和设置复选框值

了解如何从 JavaScript 获取和设置表单中可用复选框的值。复选框是在打开和关闭值之间切换，当您希望用户选中所需的项目时使用。要显示复选框，请为输入元素的类型属性指定复选框。

在 HTML 中创建复选框

要在 HTML 中显示文本框，请为输入元素的类型属性指定复选框。

<input type="checkbox">

设置 checked 属性以将复选框标记为已选中。

<input type="checkbox" checked>

结合 label 元素在复选框后显示标签。

<label><input type="checkbox">购买</label>

获取和设置复选框值

要了解复选框当前是选中还是未选中，请参考表示输入元素的 HTMLInputElement 对象的 checked 属性的值。格式如下。

element.checked

如果选中，则选中属性的值为 true，否则为 false。

例如，获取id属性值为mycheckbox的复选框中输入的值，写法如下。

let element = document.getElementById('mycheckbox');
console.log(element.checked);

您还可以为选中的属性设置 true 或 false 的值。

let element = document.getElementById('mycheckbox');
element.checked = true;

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<label><input type="checkbox" id="check1">晚餐</label>
<label><input type="checkbox" id="check2">早餐</label>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
  if (checkbox1.checked){
    console.log('含晚餐');
  } else {
    console.log('没有晚餐');
  }

  if (checkbox2.checked){
    console.log('含早餐');
  } else {
    console.log('没有早餐');
  }
}

let checkbox1 = document.getElementById('check1');
let checkbox2 = document.getElementById('check2');
checkbox2.checked = true;

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

我在屏幕上显示两个复选框。通过将其 checked 属性设置为 true，默认选中第二个复选框。

单击按钮时，它会获取每个复选框的 checked 属性的值，并打印到控制台是否选中。

复选框事件处理

复选框在打开或关闭时触发更改事件。

如果要使用change事件，就这样写。

<label><input type="checkbox" id="saveCheckbox">保存する</label>

<script>
function valueChange(){
    // 事件发生时处理
}

let saveCheckbox = document.getElementById('saveCheckbox');
saveCheckbox.addEventListener('change', valueChange);
</script>

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<label><input type="checkbox" id="saveCheckbox">早餐</label>
</div>

<p id="msg"></p>

<script>
function valueChange(event){
  if (saveCheckbox.checked){
    msg.innerText = '选择了早餐';
  }else{
    msg.innerText = '解除了早餐';
  }
}

let saveCheckbox = document.getElementById('saveCheckbox');
saveCheckbox.addEventListener('change', valueChange);
let msg = document.getElementById('msg');
</script>
</script>

</body>
</html>

打开和关闭复选框将在屏幕上显示一条消息。

30-4 使用 JavaScript 获取和设置单选按钮值

了解如何从 JavaScript 获取和设置表单中可用的单选按钮值。单选按钮在两个值之间切换，打开和关闭，就像复选框一样，但它们用于选择多个选项之一。因此，同一组包含的单选按钮中只有一个单选按钮被打开。要显示单选按钮，请为 input 元素的类型属性指定 radio。

在 HTML 中创建单选按钮

要在 HTML 中显示单选按钮，请为 input 元素的类型属性指定 radio。

<input type="radio">

结合标签元素在单选按钮后显示标签。

<label><input type="radio">橙子</label>

单选按钮通常用于选择多个单选按钮之一。要将多个单选按钮组合在一起，请将每个单选按钮的名称属性设置为相同的值。此外，为每个单选按钮的值属性设置不同的值，以便您稍后可以检索选择了哪个单选按钮。

<label><input type="radio" name="fruit" value="orange">橙子</label>
<label><input type="radio" name="fruit" value="lemon">柠檬</label>
<label><input type="radio" name="fruit" value="strawberry">草莓</label>

要使其中一个单选按钮最初被选中，请将 checked 属性设置为该单选按钮。

<label><input type="radio" name="fruit" value="orange">橙子</label>
<label><input type="radio" name="fruit" value="lemon" checked >柠檬</label>
<label><input type="radio" name="fruit" value="strawberry">草莓</label>

获取和设置单选按钮值

要找出同一组单选按钮中当前选中的是哪个单选按钮，使用getElementsByName方法获取具有指定name属性的元素的列表，然后为每个元素表示input元素的引用值HTMLInputElement 对象的 checked 属性。格式如下。

element.checked

如果选中，则选中属性的值为 true，否则为 false。

你实际上会这样写：如果我们找到一个元素，其 checked 属性为真，我们将获得 value 属性的值。

let elements = document.getElementsByName('fruit');
let len = elements.length;
let checkValue = '';

for (let i = 0; i < len; i++){
    if (elements.item(i).checked){
        checkValue = elements.item(i).value;
    }
}

要选择同一组中的其中一个单选按钮，请使用与之前相同的过程来获取元素列表、指定索引并将 checked 属性设置为 true 。

let elements = document.getElementsByName('fruit');
elements[2].checked = true;

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<label><input type="radio" name="fruit" value="orange">橙子</label>
<label><input type="radio" name="fruit" value="lemon">柠檬</label>
<label><input type="radio" name="fruit" value="strawberry">草莓</label>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
  let checkValue = '';

  for (let i = 0; i < len; i++){
    if (fruitRadio.item(i).checked){
      checkValue = fruitRadio.item(i).value;
    }
  }
  console.log('选择的是' + checkValue + ' 。');
}

let fruitRadio = document.getElementsByName('fruit');
let len = fruitRadio.length;
fruitRadio[0].checked = true;

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

我在屏幕上显示了三个单选按钮。我们将第一个单选按钮的 checked 属性设置为 true 以默认选中它。

选择单选按钮后，单击该按钮时，将检索当前选中的单选按钮的值并将其输出到控制台。

获取和设置表单元素中有单选按钮时的值

如果选中的单选按钮位于表单元素内，还有另一种方法可以获取它。

<form>
label><input type="radio" name="fruit" value="orange">橙子</label>
<label><input type="radio" name="fruit" value="lemon" checked>柠檬</label>
<label><input type="radio" name="fruit" value="strawberry">草莓</label>
</form>

首先使用 getElementById 等方法获取表单元素。

<form id="fruitbox">
...
</form>

<script>
let fruitbox = document.getElementById('fruitbox');
</script>

获取包含在表单元素中的 RadioNodeList 对象。要获取它，您可以通过将目标单选按钮中设置的名称属性的值指定为表示表单的 HTMLFormElement 对象的 elements 属性的值来获取 RadioNodeList 对象。

<form id="fruitbox">
...
</form>

<script>
let fruitbox = document.getElementById('fruitbox');
radioNodeList = fruitbox.elements['fruit'];
</script>

您可以通过引用 RadioNodeList 对象的值对象来获取当前选中的单选按钮的值。

<form id="fruitbox">
...
</form>

<script>
let fruitbox = document.getElementById('fruitbox');
radioNodeList = fruitbox.elements['fruit'];
let checkValue = radioNodeList.value;
</script>

要在表单元素包含的单选按钮中选择指定的单选按钮，请为表示表单的HTMLFormElement 对象的elements 属性值指定索引，以获取单选按钮元素。为获取的单选按钮的 checked 属性设置 true。

<form id="fruitbox">
...
</form>

<script>
let fruitbox = document.getElementById('fruitbox');
radioNodeList = fruitbox.elements[1].checked = true;
</script>

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<form id="travelbox">
<label><input type="radio" name="travel" value="qingdao">青岛</label>
<label><input type="radio" name="travel" value="shanghai">上海</label>
<label><input type="radio" name="travel" value="beijing">北京</label>
</form>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
  let checkValue = travelbox.elements['travel'].value;
  console.log('选择的是 ' + checkValue + ' 。');
}

let travelbox = document.getElementById('travelbox');
travelbox.elements[1].checked = true;

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

我在屏幕上显示了三个单选按钮。将第二个单选按钮的 checked 属性设置为 true 会默认选中它。

选择单选按钮后，单击该按钮时，将检索当前选中的单选按钮的值并将其输出到控制台。

单选按钮事件处理

单选按钮在新选择的单选按钮上触发更改事件。（从选中更改为未选中不会触发更改事件）。

如果要使用change事件，就这样写。

<label><input type="radio" name="fruit" value="orange" id="fruitRadio1">
橙子</label>
<label><input type="radio" name="fruit" value="lemon" id="fruitRadio2">
柠檬</label>

<script>
function valueChange(){
    // 事件发生时处理
}

let fruitRadio1 = document.getElementById('fruitRadio1');
fruitRadio1.addEventListener('change', valueChange);

let fruitRadio2 = document.getElementById('fruitRadio1');
fruitRadio1.addEventListener('change', valueChange);
</script>

另外，如果您的表单元素中有无线电按钮，则在选择新的无线电按钮时，表单将发射更改事件。

如果要对表单元素使用更改事件，请编写如下。

<form id="travelbox">
<label><input type="radio" name="travel" value="qingdao">青岛</label>
<label><input type="radio" name="travel" value="shanghai">上海</label>
</form>

<script>
function valueChange(){
    // 事件发生时处理
}

let travelbox = document.getElementById('travelbox');
travelbox.addEventListener('change', valueChange);
</script>

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面</p>

<div>
<label><input type="radio" name="fruit" value="orange" id="fruitRadio1">
橙子</label>
<label><input type="radio" name="fruit" value="lemon" id="fruitRadio2">
柠檬</label>
<label><input type="radio" name="fruit" value="strawberry" id="fruitRadio3">
草莓</label>
</div>

<script>
function valueChange(event){
  console.log('选择的是' + event.currentTarget.value + ' 。');
}

let fruitRadio1 = document.getElementById('fruitRadio1');
fruitRadio1.addEventListener('change', valueChange);

let fruitRadio2 = document.getElementById('fruitRadio2');
fruitRadio2.checked = true;
fruitRadio2.addEventListener('change', valueChange);

let fruitRadio3 = document.getElementById('fruitRadio3');
fruitRadio3.addEventListener('change', valueChange);
</script>

</body>
</html>

如果您选择的单选按钮与所选的单选按钮不同，则该消息将显示在屏幕上。

使用事件发生时调用回调函数时传入的InputEvent对象的currentTarget属性获取单选按钮后，引用value属性获取选中单选按钮的值。

示例代码

这次在表单元素中添加了一个单选按钮。请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<form id="travelbox">
<label><input type="radio" name="travel" value="qingdao">青岛</label>
<label><input type="radio" name="travel" value="shanghai">上海</label>
<label><input type="radio" name="travel" value="beijing">北京</label>
</form>
</div>

<script>
function valueChange(event){
  let checkValue = travelbox.elements['travel'].value;
  console.log('选择的是' + checkValue + ' 。');
}

let travelbox = document.getElementById('travelbox');
travelbox.elements[1].checked = true;
travelbox.addEventListener('change', valueChange);
</script>

</body>
</html>

如果您选择的单选按钮与所选的单选按钮不同，则该消息将显示在屏幕上。

30-5 使用 JavaScript 获取和设置下拉菜单值

了解如何从 JavaScript 获取和设置表单中可用下拉菜单的选定值。下拉菜单是单击时展开的菜单，允许您从显示的多个项目中选择一个或多个项目。要显示下拉菜单，请添加与 selectt 元素内的项目数一样多的选项元素。

在 HTML 中创建下拉菜单

要在 HTML 中显示下拉菜单，请添加与要在 select 元素中显示的选项数量一样多的 option 元素。

<select>
<option>Orange</option>
<option>Lemon</option>
<option>Strawberry</option>
</select>

结合 label 元素在下拉菜单前显示一个标签。

<label for="fruit">选择</label>
<select id="fruit">
<option>Orange</option>
<option>Lemon</option>
<option>Strawberry</option>
</select>

どの選択肢が選択されたのかをあとで取得するために、それぞれの選択肢の value 属性に異なる値を設定してください。

<label for="fruit">选择</label>
<select id="fruit">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="strawberry">Strawberry</option>
</select>

要指定最初选择的选项，请将 selected 属性设置为目标选项。

<label for="fruit">选择</label>
<select id="fruit">
<option value="orange">Orange</option>
<option value="lemon" selected>Lemon</option>
<option value="strawberry">Strawberry</option>
</select>

要允许一次选择多个项目，请在 select 元素上设置 multiple 属性。

<label for="fruit">选择</label>
<select id="fruit" multiple>
<option value="orange">Orange</option>
<option value="lemon" selected>Lemon</option>
<option value="strawberry">Strawberry</option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
</select>

如果设置了 multiple 属性，它将是一个选择菜单，其中的选项从头开始显示，而不是下拉菜单。

设置 multiple 属性后，您可以使用 size 属性指定一次在屏幕上显示多少个选项。

<label for="fruit">选择</label>
<select id="fruit" multiple size="3">
<option value="orange">Orange</option>
<option value="lemon" selected>Lemon</option>
<option value="strawberry">Strawberry</option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
</select>

获取和设置下拉菜单值

要获取下拉菜单中所选选项的值，请参考表示选择元素的 HTMLSelectElement 对象的 value 属性的值。格式如下。

element.value

value 属性的值是当前选中选项的 value 属性中设置的值。

你实际上会这样写：

let element = document.getElementById('myselect');
console.log(element.value);

要选择其中一个选项，请获取 HTMLSelectElement 对象，然后引用 options 属性以获取包含在 select 元素中的选项列表。然后指定索引并为所选属性设置 true。

let element = document.getElementById('myselect');
let options = element.options;
options[1].selected = true;

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<label for="fruit">选择</label>
<select id="fruit">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="strawberry">Strawberry</option>
</select>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
  console.log('选择的是' + fruitSelect.value + ' 。');
}

let fruitSelect = document.getElementById('fruit');
fruitSelect.options[2].selected = true;

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

屏幕上显示一个包含三个选项的下拉菜单。将最后一个选项的 selected 属性设置为 true 会默认选中它。

点击菜单显示选项后，选中其中一个选项后点击按钮，会获取当前选中菜单的值，并输出到控制台。

在允许多选的选择菜单中获取值

select 要素に対して multiple 属性を設定すると複数の選択肢を同時に選択することができます。

<label for="fruit">选择</label>
<select id="fruit" multiple>
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="strawberry">Strawberry</option>
<option value="banana">banana</option>
<option value="apple">apple</option>
</select>

获取所选选项的列表 获取 HTMLSelectElement 对象后，请参考 selectedOptions 属性。格式如下。

element.selectedOptions

获取所选选项的列表 获取 HTMLSelectElement 对象后，请参考 selectedOptions 属性。格式如下。

let element = document.getElementById('myselect');
let selectOptions = element.selectedOptions;
for (let i = 0 ; i > selectOptions.length ; i++){
    console.log(selectOptions[i].value);
}

检索选定选项列表后，指定索引以按顺序检索选项元素。然后引用 value 属性或 label 属性来检索值。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<label for="fruit">选择</label>
<select id="fruit" multiple size="5">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="strawberry">Strawberry</option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
</select>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
  let selectOptions = fruitSelect.selectedOptions;

  console.log('当前选择的项目是');
  for (let i = 0 ; i < selectOptions.length ; i++){
    console.log(selectOptions[i].value);
  }
  console.log('。');
}

let fruitSelect = document.getElementById('fruit');

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

显示一个选择菜单，允许您一次选择多个选项。当你选中一个选项并点击按钮时，所有选中选项的值都会输出到控制台。

下拉菜单事件处理

当进行新选择时，下拉菜单会在 select 元素上触发 change 事件。

如果要使用change事件，就这样写。

<select id="fruit">
・・・
</select>

<script>
function valueChange(){
    //事件发生时处理
}

let element = document.getElementById('fruit');
element.addEventListener('change', valueChange);
</script>

change イベントの詳しい使い方については「changeイベント：フォームや選択メニューが変更されたとき」を参照されてください。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<label for="fruit">选择</label>
<select id="fruit">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="strawberry">Strawberry</option>
</select>

<script>
function valueChange(){
  console.log('新选择了' + fruitSelect.value + '。');
}

let fruitSelect = document.getElementById('fruit');
fruitSelect.options[2].selected = true;
fruitSelect.addEventListener('change', valueChange);
</script>

</body>
</html>

新しい選択肢を選択するとコンソールに選択した選択肢の値が出力されます。

请注意，即使将 multiple 属性设置为 select 元素，也可以使用相同的代码执行事件处理。

30-6 使用 JavaScript 获取和设置滑块的值

我们将解释如何从 JavaScript 获取和设置由表单中可用的滑块设置的值。滑块选择一个值，滑块左右移动，用于选择预设最小值和最大值之间的数字。要显示滑块，请为输入元素的类型属性指定范围。

在 HTML 中创建滑块

要在 HTML 中显示滑块，请将范围指定为输入元素的类型属性。

<input type="range">

默认设置为 0 表示最小值，100 表示最大值，1 表示位移。为 min 属性指定一个值以设置最小值，为 max 属性指定一个值以设置最大值。要设置滑块的移动宽度，请为 step 属性设置一个值。

<input type="range" min="0" max="500" step="50">

要设置滑块的初始值，请将值设置为 value 属性。

<input type="range" value="10">

结合标签元素在滑块后显示标签。

<label><input type="range">音量</label>

获取和设置滑块值

要获取滑块的值，请参考表示输入元素的 HTMLInputElement 对象的 value 属性。格式如下。

element.value

例如获取id属性值为myslider的滑块指定的值，写法如下。

let element = document.getElementById('myslider');
console.log(element.value);

还可以通过为 value 属性分配一个值来为滑块设置一个值。

let element = document.getElementById('myslider');
element.value = '50';

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<label><input type="range" step="10" id="volumeSlider">音量</label>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
  console.log('音量是 ' + volumeSlider.value + '。');
}

let volumeSlider = document.getElementById('volumeSlider');
volumeSlider.value = "30";

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

滑块的初始值是通过为 value 属性分配一个值来设置的。移动滑块后单击按钮时，使用 value 属性获取滑块的值并输出到控制台。

滑块事件处理

滑块触发输入和更改事件。当您移动滑块时，每次值更改时都会触发输入事件。仅当滑块完成移动时才会触发 change 事件。

如果要使用change事件，就这样写。

<input type="range" id="myslider">

<script>
function inputChange(){
    //  事件发生时处理
}

let element = document.getElementById('myslider');
element.addEventListener('change', inputChange);
</script>

如果要使用输入事件，就这样写。

<input type="range" id="myslider">

<script>
function inputChange(){
    // 事件发生时处理
}

let element = document.getElementById('myslider');
element.addEventListener('input', inputChange);
</script>

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<label><input type="range" step="10" id="volumeSlider">音量</label>
</div>

<p id="msg"></p>

<script>
function inputChange(event){
  msg.innerText = '音量是' + volumeSlider.value + ' 。';
}

let volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', inputChange);
let msg = document.getElementById('msg');
</script>

</body>
</html>

当您移动屏幕上显示的滑块时，当前值显示在滑块下方。

由于我们这次使用的是 input 事件，因此在移动滑块时也会发生该事件。

30-7 使用 JavaScript 获取和设置在颜色选择器中选择的颜色的值

我将解释如何从 JavaScript 获取和设置颜色选择器中的值集。颜色选择器用于从颜色样本中选择颜色。您可以以#FFFFFF 的形式获取选定的颜色。要显示颜色选择器，请在输入元素的类型属性中指定颜色。

在 HTML 中创建颜色选择器

要在 HTML 中显示颜色选择器，请在输入元素的类型属性中指定颜色。

<input type="color">

其显示方式取决于您的环境，但对于 Windows 10，单击颜色选择器将显示用于选择颜色的屏幕，如下所示。

设置 value 属性来设置颜色选择器的初始值。

<input type="color" value="#0000FF">

结合 label 元素在颜色选择器之前显示一个标签。

<label>选择颜色<input type="color"></label>

获取和设置颜色选择器值

要获取颜色选择器的值，请参考表示输入元素的 HTMLInputElement 对象的 value 属性。格式如下。

element.value

例如获取id属性值为mycolor的拾色器指定的值，写法如下。

let element = document.getElementById('mycolor');
console.log(element.value);

您还可以通过为 value 属性分配一个值来设置颜色选择器的值。

let element = document.getElementById('mycolor');
element.value = '#FF0000';

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<label><input type="color" id="colorBox">选择颜色</label>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
  console.log('当前选择的颜色是' + colorBox.value + ' 。');
}

let colorBox = document.getElementById('colorBox');
colorBox.value = "#F0F0F0";

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

#F0F0F0 设置为颜色选择器的初始值。单击颜色选择器以显示以下颜色选择屏幕（Chrome/Windows10）。

单击新颜色以设置颜色。

当点击屏幕上显示的按钮时，会引用拾色器的value属性的值，将当前设置的颜色信息输出到控制台。

拾色器事件处理

カラーピッカーでは色を変更すると change イベントが発生します。change イベントを利用する場合は次のように記述します。

<input type="color" id="mycolor">

<script>
function inputChange(){
    // 事件发生时处理
}

let element = document.getElementById('mycolor');
element.addEventListener('change', inputChange);
</script>

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
#outer{
margin-top:20px;
padding:50px;
width:300px;
background:#00F000;
color:#000000;
text-align:center;
font-size:30px;
font-weight:bold;
}
</style>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<label><input type="color" id="colorBack">背景色</label>
<label><input type="color" id="colorFore">文字颜色</label>
</div>

<div id="outer">
Hello, JavaScript
</div>

<script>
let outer = document.getElementById('outer');

let colorBack = document.getElementById('colorBack');
colorBack.value = "#00F000";
colorBack.addEventListener('change', function(){
  outer.style.background = this.value;
});

let colorFore = document.getElementById('colorFore');
colorFore.value = "#000000";
colorFore.addEventListener('change', function(){
  outer.style.color = this.value;
});
</script>

</body>
</html>

用于设置背景颜色和文本颜色的颜色选择器显示在屏幕上。

在背景颜色选择器中选择一种新颜色将更改显示在屏幕底部的 div 元素内的背景颜色。

在文本颜色选择器中选择一种新颜色将更改屏幕底部显示的 div 元素中的文本颜色。

30-8 使用JavaScript获取和设置在文件选择对话框中选择的文件的信息

我们将解释如何使用 JavaScript 的文件选择对话框获取和设置所选文件的信息。您可以在文件选择对话框中选择一个或多个文件。要显示文件选择对话框，请为输入元素的类型属性指定文件。

在 HTML 中创建文件选择对话框

要以 HTML 显示文件选择对话框，请为输入元素的类型属性指定文件。

<input type="file">

它的显示方式取决于您的环境，但对于 Windows 10，单击“浏览…”按钮将显示一个对话框以选择文件，如下所示。

设置 multiple 属性以允许一次选择多个文件。

<input type="file" multiple>

在 accept 属性中指定文件扩展名，以限制显示文件选择对话框时列表中显示的文件格式。例如“.jpg”或“.txt”。如果您指定多个文件，请用逗号 (,) 分隔它们并指定它们，如“.jpg, .txt”。

<input type="file" accept=".jpg, .png, .gif">

如果设置 accept 属性并单击“浏览…”按钮，文件选择对话框将默认仅显示 accept 属性中指定的文件类型。

但是，如果用户将文件选择对话框中显示的文件格式更改为“所有文件（*.*）”，则将显示所有文件，并且可以选择任何文件。由于无法限制文件格式，如有必要，您需要在选择文件后进行检查。

获取文件选择对话框中选择的文件名和文件信息

要获取在文件选择对话框中选择的文件的名称，请参考表示输入元素的 HTMLInputElement 对象的 value 属性的值。格式如下。

element.value

例如，要获取文件选择对话框中选择的id属性值为myfile的文件的名称，写法如下。

let element = document.getElementById('myfile');
console.log(element.value);

如果在没有选择文件时引用 value 属性，您将得到一个空字符串。另外，如果可以选择多个文件，则可以通过选择多个文件的值属性来获取第一个文件名。

注意，引用value属性得到的文件名格式为“ C:\fakepath\文件名”，如下图所示，与文件实际存在的路径不同。这是出于安全原因。

C:\fakepath\文件名

同样出于安全原因，不能从 JavaScript 代码设置 value 属性。

按顺序获取多个选中的文件

如果不仅要获取文件名，还要获取文件的最后修改日期、文件大小和 MIME 类型，请参考文件属性的值。格式如下。

element.files

可能的值是 FileList 对象，它是代表所选文件的 File 对象的数组。通过指定索引，可以按顺序引用多个选定的文件。

例如，要将所有选定文件的名称打印到控制台，请运行：

let element = document.getElementById('myfile');
let files = element.files;

for(let i = 0 ; i < files.length ; i++){
    console.log(files[i].name);
}

在提取的文件对象中可以引用的属性如下。

File.lastModifiedDate  返回上次修改文件的日期
File.name              文件名
File.size              文件大小（以字节为单位）
File.type              文件的 MIME 类型

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<input type="file" id="fileBox" multiple >
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
  console.log('value: ' + fileBox.value);

  let files = fileBox.files;

  for(let i = 0 ; i < files.length ; i++){
    console.log('第'+(i + 1) + '个文件');
    console.log('name: ' + files[i].name);
    console.log('size: ' + files[i].size);
    console.log('type: ' + files[i].type);
  }
}

let fileBox = document.getElementById('fileBox');

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

单击“选择文件”时，将显示一个文件选择对话框，您可以选择一个文件。

点击按钮，将选中文件的信息输出到控制台

文件选择对话框事件处理

在文件选择器对话框中，选择一个新文件会触发一个更改事件。如果要使用change事件，就这样写。

<input type="file" id="myfile">

<script>
function inputChange(){
    // 事件发生时处理
}

let myfile = document.getElementById('myfile');
element.addEventListener('change', inputChange);
</script>

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个示例页面。</p>

<div>
<input type="file" id="fileBox" multiple >
</div>

<p id="msg"></p>

<script>
function changeFile(){
  let files = fileBox.files;
  let filenames = "";

  for(let i = 0 ; i < files.length ; i++){
  	if (i > 0){
      filenames += ', ';
  	}

    filenames += files[i].name;
  }

  msg.innerText = '选择的文件是 ' + filenames + ' 。';
}

let fileBox = document.getElementById('fileBox');
fileBox.addEventListener('change', changeFile);
let msg = document.getElementById('msg');
</script>

</body>
</html>

当在文件选择对话框中选择一个新文件时，所选文件的名称将显示在屏幕上。

关联内容

JavaScript
第二章将JavaScript写到HTML编码中
JavaScript
第一章 在浏览器中启用 JavaScript
JavaScript
第三章 JavaScript 基础知识
JavaScript
第四章 JavaScript的数值
JavaScript
第五章 長整数
JavaScript
第六章 字符串的基础