博客

jQuery val()的例子

  • Post category:jquery

下面我来详细讲解一下“jQuery val()的例子”的完整攻略。

概述

val()是jQuery中一个非常常用的方法，用于获取或设置表单（特别是输入框）元素的值。本攻略将会介绍val()的基本用法以及实例应用。

基本用法

获取元素的值

当我们需要获取一个输入框元素(input) 或 下拉列表元素(select) 的值时，可以使用val()方法。

// 获取 input 元素的值
var inputVal = $('input[name="username"]').val();

// 获取 select 元素的值
var selectVal = $('select[name="city"]').val();

设置元素的值

当我们需要设置一个输入框元素(input) 或 下拉列表元素(select) 的值时，可以使用val(value)方法。

// 设置 input 元素的值
$('input[name="username"]').val('Mike');

// 设置 select 元素的值
$('select[name="city"]').val('Shanghai');

示例说明

示例 1 – 动态表单输入

下面是一个实际场景的应用，动态添加表单输入框，并通过val()方法获取/设置输入框的值。

HTML代码：

<form>
  <button id="addInput">添加输入框</button>
  <div id="inputList"></div>
  <button id="submit">提交</button>
</form>

JS代码：

$(function(){
  var inputIndex = 0;

  $('#addInput').on('click', function(){
    inputIndex++;
    $('#inputList').append('<input name="input'+inputIndex+'" type="text"><br>');
  });

  $('#submit').on('click', function(){
    var inputValues = [];
    $('input[type="text"]').each(function(){
      inputValues.push($(this).val());
    });
    console.log(inputValues);
  });
});

效果：点击“添加输入框”按钮，可以动态添加一个输入框，输入框的name属性按照“input+数字”的格式递增。输入完毕后，点击“提交”按钮，控制台会输出所有输入框的值。

示例 2 – 对话框输入及验证

下面是一个实际场景的应用，利用val()方法获取/设置对话框(textarea)的值，并在提交时验证输入是否合法。

HTML代码：

<form>
  <button id="openDialog">打开对话框</button><br>
  <textarea id="dialog" rows="5" cols="30"></textarea><br>
  <button id="submit">提交</button>
</form>

JS代码：

function showDialog(callback){
  var $dialog = $('#dialog');
  $dialog.val('');
  $dialog.dialog({
    modal: true,
    buttons: {
      "确定": function() {
        var input = $dialog.val();
        if(input === ''){
          alert('对话框内容不能为空！');
          return;
        }
        $dialog.dialog("destroy");
        callback(input);
      },
      "取消": function() {
        $dialog.dialog("destroy");
      }
    }
  });
}

$(function(){
  $('#openDialog').on('click', function(){
    showDialog(function(input){
      console.log(input);
    });
  });
});

效果：点击“打开对话框”按钮，会弹出一个对话框，输入要求的文本。点击“确定”按钮，控制台会输出对话框的文本内容。如果对话框内容为空，则会弹出提示框告知不能为空。

Tags: