javascript - 如何更改一个输入 Onchange 选择框的某些属性

Question

有一个选择框。以及一个具有特定主机名模式的文本框。我正在考虑如何使用此文本框来更改选择框的属性。在这种情况下，当在我的选择框中选择 Mx 时，我想更改模式和占位符，标题更改为 IP 地址格式，反之，当选择 Ns 时更改为主机名。目前是 Ns 的工作。

有办法做到这一点吗？ 这是我的代码:

.to_validate:invalid {
  color: navy;
  outline: none; 
  border-color: #ff1050;
  box-shadow: 0 0 10px #ff0000;
}

<form>


<select name="type" class="minimal">
    <option value="Record" selected hidden>Record</option>
    <option value="NS">NS</option>
    <option value="MX">MX </option><!---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]) Title:Wrong Ip Placeholder: IP address-->
  </select>
  
<br/>
 
<input type="text"  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"/>
  
  
  <button type="submit">Submit</button>
</form>

Answer 1

这个怎么样(使用 jQuery):

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <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"/>
  
  
  <button type="submit">Submit</button>
</form>