Question

我有一个select标记，其中包含两个选项＆＃39; new＆＃39;和＆＃39;编辑＆＃39;

当有人选择“＆＃39; new＆＃39;选项应该标记该表单中的所有input标记，并且当有人选择“编辑”时，只需要标记几个。

<select name="todo" id="todo" required> 
    <option value="">---</option>
    <option value="new">Add</option>
    <option value="edit">Edit</option>
</select>

现在我尝试了一些功能，但它们似乎无法正常工作

<script>
var todo = $('#todo option:selected').text();
if (todo == "new") {
    $('#Name').attr('required',true);
} else if (todo == "edit") {
    //code
}
</script>

和

<script>
function req() {
    var selectBox = document.getElementById('todo');
    var userInput = selectBox.options[selectBox.selectedIndex].value;
    if (userInput == 'new') {
        $('#Name').attr('required',true);
    } else if (todo == "edit") {
        //code
    }
}
</script>

where
<select name="todo" id="todo" onchange="return req();" required></select>

只是为了确定它是否有效我将alert()方法置于if条件中，但该警报永远不会被触发。

PS。其中一个输入标签是

<input type="text" id="Name" name="Name">

感谢您提前的时间......

修改

正如@Maximillian Laumeister在第二段中指出的那样，有一个拼写错误（我在这里已经纠正过）。（对不起）

Answer 1

在你的脚本中，你有一个输入控制台错误的拼写错误：

function req() {
    var selectBox = document.getElementById('todo');
    var userInput = selectBox.options[selectbox.selectedIndex].value;
    if (userInput == 'new') {
        $('#Name').attr('required',true);
    } else if (todo == "edit") {
        //code
    }
}

它说的地方

selectBox.options[selectbox.selectedIndex].value

selectBox需要像这样大写：

selectBox.options[selectBox.selectedIndex].value

这一改变似乎对我有用。

此外，既然你问过，你的第一个脚本不起作用，因为当select选择改变时需要绑定运行，就像第一个脚本一样。此外，您需要使用jQuery的val代替text来获取option代码的值。这是第二个脚本的工作版本：

$("#todo").change(function () {
    var todo = $('#todo option:selected').val();
    if (todo == "new") {
        $('#Name').attr('required',true);
    } else if (todo == "edit") {
        //code
    }
});

Answer 2

试试这个：

$("select").change(function(){
   if($(this).val() === "new")
       $("#Name").attr("required","required");
   });

您使用了option文本“Add”，但在if语句中，您将其与字符串“new”进行了比较。这就是你的代码没有按预期工作的原因。

Answer 3

这应该足以让你前进。只要进行了不同的选择，onchange就会检测到。然后根据选择的选项执行不同的指令。

＆＃13;

jQuery(document).ready(function(){
  jQuery('#todo').on('change', function(event){
    alert(this.value);
    if(this.value === 'edit'){
      
    }
    else if(this.value === 'new'){
      
    }
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<select name="todo" id="todo" required> 
    <option value="">---</option>
    <option value="new">Add</option>
    <option value="edit">Edit</option>
</select>

＆＃13;

如何使用jquery基于select标签的输出动态地将REQUIRED属性添加到输入标签？

3 个答案: