Question

有很多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>

Answer 1

＆＃13;

$(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'));
  });
});

＆＃13;

.to_validate:invalid {
  color: navy;
  outline: none;
  border-color: #ff1050;
  box-shadow: 0 0 10px #ff0000;
}
.record {
  width: 50%;
  border: 1px solid blue;
}

＆＃13;

<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>

＆＃13;

将this上下文与.siblings()

一起使用

描述：获取匹配元素集中每个元素的兄弟元素，可选择通过选择器进行过滤。

使用this上下文将为您提供当前选择。
使用siblings()将获得当前选择的兄弟姐妹，然后给出参数input[name=hostInput]将获得确切的输入

Answer 2

您也可以像这样编写JavaScript部分。使用jQuery你可以链接命令，虽然但它可能更容易阅读。此外，您可以将.data（＆＃39; nameOfAttr＆＃39;）用于html中的数据名称of attr值（请参阅http://api.jquery.com/data/#data-html5）

一般来说，我不会使用兄弟姐妹＆＃39;因为这并不总是有效（在很大程度上取决于你的html结构）。当您在其他人也可以编辑代码的团队中工作时，您也可以查找closest('.record')并在该范围内查找您的输入。这样，只要是兄弟姐妹，你的代码就会起作用，例如。如果select包含在div或span中（这在您自定义selectbox时很常见）。

性能提示：理想情况下，您不使用[name = nameHere ]选择器，因为与id和className选择器（#id或{{}相比，此类型的选择器速度非常慢1}}）。但是这段代码不是更大的JavaScript应用程序的一部分（从外观上看），所以如果你使用这个选择器你就没问题了。

.js_some_class_name

如何根据onchange每个选择框更改每个文本框值

2 个答案: