如何基于onchange每个选择框更改每个文本框值
[英]How to change each textbox value based on onchange each selectbox
问题描述
有许多命名为record的div。在这些div中，我有一个选择框，用于更改文本框的值和属性。 该代码运行良好。 但是问题是当选择框更改时，所有文本框值都会更改。 如何根据每个选择框更改文本框的值。 不是所有的人？ 这是我的代码：
$(function () { $('select[name=type]').change(function () { var $option = $(this).find(":selected"); $('input[name=hostInput]').attr('pattern', $option.attr('data-pattern')); $('input[name=hostInput]').attr('placeholder', $option.attr('data-placeholder')); $('input[name=hostInput]').attr('title', $option.attr('data-title')); }); });
.to_validate:invalid { color: navy; outline: none; border-color: #ff1050; box-shadow: 0 0 10px #ff0000; } .record { width:50%; border:1px solid blue; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <form> <div class="record"> <select name="type" class="minimal"> <option value="Record" selected hidden>Record</option> <option value="NS" data-pattern="(?!\\d+(?:\\.\\d+){3}$)(([a-zA-Z\\d]|[a-zA-Z\\d][a-zA-Z\\d-]*[a-zA-Z\\d])\\.)*([A-Za-z\\d]|[A-Za-z\\d][A-Za-z\\d-]*[A-Za-z\\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> </select> <br/> <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" pattern="(?!\\d+(?:\\.\\d+){3}$)(([a-zA-Z\\d]|[a-zA-Z\\d][a-zA-Z\\d-]*[a-zA-Z\\d])\\.)*([A-Za-z\\d]|[A-Za-z\\d][A-Za-z\\d-]*[A-Za-z\\d])" title="Wrong host"/> </div> <br/> <div class="record"> <select name="type" class="minimal"> <option value="Record" selected hidden>Record</option> <option value="NS" data-pattern="(?!\\d+(?:\\.\\d+){3}$)(([a-zA-Z\\d]|[a-zA-Z\\d][a-zA-Z\\d-]*[a-zA-Z\\d])\\.)*([A-Za-z\\d]|[A-Za-z\\d][A-Za-z\\d-]*[A-Za-z\\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> </select> <br/> <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" pattern="(?!\\d+(?:\\.\\d+){3}$)(([a-zA-Z\\d]|[a-zA-Z\\d][a-zA-Z\\d-]*[a-zA-Z\\d])\\.)*([A-Za-z\\d]|[A-Za-z\\d][A-Za-z\\d-]*[A-Za-z\\d])" title="Wrong host"/> </div> <button type="submit">Submit</button> </form> </body> </html>
2 个解决方案
解决方案1
3 已采纳 2017-01-17 06:45:25
$(function() { $('select[name=type]').change(function() { var $option = $(this).find(":selected"); $(this).siblings('input[name=hostInput]').attr('pattern', $option.attr('data-pattern')); $(this).siblings('input[name=hostInput]').attr('placeholder', $option.attr('data-placeholder')); $(this).siblings('input[name=hostInput]').attr('title', $option.attr('data-title')); }); });
.to_validate:invalid { color: navy; outline: none; border-color: #ff1050; box-shadow: 0 0 10px #ff0000; } .record { width: 50%; border: 1px solid blue; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <form> <div class="record"> <select name="type" class="minimal"> <option value="Record" selected hidden>Record</option> <option value="NS" data-pattern="(?!\\d+(?:\\.\\d+){3}$)(([a-zA-Z\\d]|[a-zA-Z\\d][a-zA-Z\\d-]*[a-zA-Z\\d])\\.)*([A-Za-z\\d]|[A-Za-z\\d][A-Za-z\\d-]*[A-Za-z\\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX</option> </select> <br/> <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" pattern="(?!\\d+(?:\\.\\d+){3}$)(([a-zA-Z\\d]|[a-zA-Z\\d][a-zA-Z\\d-]*[a-zA-Z\\d])\\.)*([A-Za-z\\d]|[A-Za-z\\d][A-Za-z\\d-]*[A-Za-z\\d])" title="Wrong host" /> </div> <br/> <div class="record"> <select name="type" class="minimal"> <option value="Record" selected hidden>Record</option> <option value="NS" data-pattern="(?!\\d+(?:\\.\\d+){3}$)(([a-zA-Z\\d]|[a-zA-Z\\d][a-zA-Z\\d-]*[a-zA-Z\\d])\\.)*([A-Za-z\\d]|[A-Za-z\\d][A-Za-z\\d-]*[A-Za-z\\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX</option> </select> <br/> <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" pattern="(?!\\d+(?:\\.\\d+){3}$)(([a-zA-Z\\d]|[a-zA-Z\\d][a-zA-Z\\d-]*[a-zA-Z\\d])\\.)*([A-Za-z\\d]|[A-Za-z\\d][A-Za-z\\d-]*[A-Za-z\\d])" title="Wrong host" /> </div> <button type="submit">Submit</button> </form> </body> </html>
this上下文与.siblings（）一起使用
描述：获取匹配元素集合中每个元素的同级元素，可选地由选择器过滤。
- 使用
this上下文将为您提供当前选择。 - 使用
siblings()将使您获得当前选择的兄弟姐妹，然后提供参数input[name=hostInput]将获得确切的输入
解决方案2
1 2017-01-17 06:58:17
您也可以这样编写JavaScript部分。 使用jQuery，您可以链接命令，尽管答案完全相同，但可能更易于阅读。 此外，您可以将.data（'nameOfAttr'）用于html中的attr数据名称值（请参见http://api.jquery.com/data/#data-html5 ）
通常我不使用“兄弟姐妹”，因为这并不总是可行的（很大程度上取决于您的html结构）。 当您在其他人也可以编辑您的代码的团队中工作时，您也可以寻找closest('.record')并在该范围内找到您的输入。 这样，无论您是否在同级中，您的代码都可以正常工作。 如果选择内容包装在div或span中（这是自定义选择框时的常见情况）。
性能提示：理想情况下，您不要使用[name = nameHere ]选择器，因为与id和className选择器（ #id或.js_some_class_name ）相比，这种选择器的速度非常慢。 但是，此代码不是更大的JavaScript应用程序的一部分（从它的外观来看），因此，如果使用此选择器，就可以了。
$(function() {
$('select[name=type]').change(function() {
var $option = $(this).find(":selected");
$(this).closest('.record').find('input[name=hostInput]')
.attr('pattern', $option.data('pattern'))
.attr('placeholder', $option.data('placeholder'))
.attr('title', $option.data('title'));
});
});
如何更改在jQuery中使用循环创建的文本框onchange的值
[英]How to change value of textbox onchange created using loop in jquery
如何根据 textContent 值更改每个标签的 CSS 类
[英]How to change the CSS class of each label based on the textContent value
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.