选择下拉表单验证（显示文本）

20 浏览
0 Comments

选择下拉表单验证（显示文本）

我正在尝试验证一个表单。

我试图通过验证选项的显示文本而不是选项值来验证表单，因为选项值是整数。

例如：

如果用户点击提交，表单应该验证选项的显示文本是否为“请选择”，而不管选项值是什么。

以下是不起作用的代码：

function fun(){
    $('#cardtype').change(function () {
        var sel = $('option:selected', this).text();
        if (sel == "请选择") {
            $('.showotherpDescription').show();
        } else {
        } 
    }); 
}

不起作用的例子: http://jsfiddle.net/f5hxpo7g/2/

还包括根据选项值验证表单的正常工作示例：

基于选项值验证的示例：http://jsfiddle.net/f5hxpo7g/1/

请告诉我我做错了什么。

提前致谢。

0

3 答案

0 Comments

问题：Select Drop down Form Validation (Display text)这个问题的出现的原因以及解决方法

原因：问题出现的原因是在点击提交按钮时，没有对下拉菜单进行验证，没有判断是否选择了正确的选项。

解决方法：可以通过以下步骤解决该问题：

1. 在HTML代码中，给提交按钮添加一个id属性：id="subbutton"。

2. 在JavaScript代码中，使用jQuery的click()方法来绑定提交按钮的点击事件。

3. 在点击事件中，使用option:selected来获取当前选中的选项，并使用text()方法获取选项的文本内容。

4. 判断选项的文本内容是否等于"Please select"，如果是，则弹出提示框，提示用户选择选项。

5. 在HTML代码中，移除按钮上的onclick="..."属性，因为不再需要这个属性。

6. 最后，可以通过访问working JSFiddle来查看修改后的代码和效果。

以下是修复后的JavaScript代码：

$(function () {
    $('#subbutton').click(function () {
        if ($('#cardtype option:selected').text() === "Please select")
        {
            alert("PLEASE SELECT");
        }
    });
});

0
0 Comments

问题出现的原因是代码中存在两个问题：

1. 函数的目的是验证表单，但是代码将该函数与下拉列表的选择更改事件绑定在一起，导致验证代码在选择更改时触发。

2. 获取当前选中选项的文本方式不正确，应该基于包含选项的元素创建选择器，否则如果页面中有多个下拉列表，则会获得多个值（每个选中选项一个）。

解决方法是修改代码，将验证函数与正确的事件绑定在一起，并改变获取选项文本的方式。以下是修改后的代码：

HTML:

JS:

function fun(){
  var cmb = document.getElementById('cardtype');
  var sel = cmb.options[cmb.selectedIndex].text;
  if (sel == "--- Please select ---") {
    alert('Please select a different option');
    //$('.showotherpDescription').show();
  } else {
  } 
}

通过以上修改，代码将在点击按钮时验证下拉列表的选择是否为默认选项，如果是则弹出提示框。

0
0 Comments

问题的原因是在表单验证函数中，当下拉菜单选择项的文本值为"--- Please select ---"时，会弹出提示框要求用户选择一个卡类型。解决方法是通过获取下拉菜单选中项的文本值，判断是否为"--- Please select ---"，如果是则弹出提示框。

代码示例：

function fun()
{
  var ddl = document.getElementById("cardtype");
  var valor = ddl.options[ddl.selectedIndex].text;
  if (valor == "--- Please select ---")
  {
    alert("Please select a card type");
  }
}

问题解决后，可以在jsfiddle中查看完整的工作示例：http://jsfiddle.net/robertrozas/XFtBD/169/。

除此之外，还可以使用jQuery来实现相同的功能。具体代码如下：

$("select[name='cards'").find('option:selected').text();

如果需要基于jQuery的版本，请告诉我，我很乐意帮助你。

0