检查输入的属性不是多于一个

Question

有多个选择框和输入框。我在身体加载时编写了一个函数。我的函数将检查选择框值并将模式发送到输入。我的问题是这段代码会重复所有字段的模式，例如如果选择框是“NS”，它将重复NS模式到所有输入。 这是我的片段：

$(function() {
    var value= $('select[name=type]').val();
    var pattern = $('select[name=type] option:selected').data('pattern');

    $('input[name=hostInput]').attr('pattern', pattern);
    $('input[name=hostInput]').val(value);
});

.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" hidden>Record</option>
    <option value="NS" selected 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" title="Wrong host"/>
  <br/>
  
   <br/>
  
    <select name="type" class="minimal">
    <option value="Record" 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" selected 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" title="Wrong host"/>
  <br/>

</form>

Answer 1

在for(i=0; i<n; i++) 上用$.each()用来循环播放所有内容。

然后使用input[name=hostInput]获取上一个对象

$(this).prevAll('select[name=type]').val()

function run() {


  $('input.to_validate').each(function() {
    var value = $(this).prevAll('select[name=type]').val();
    var pattern = $(this).prev('select[name=type] option:selected').data('pattern');

    $(this).attr('pattern', pattern);
    $(this).val(value);
  })
}

run()

$('.minimal').change(function() {
run();
})

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

Answer 2

如果您想要将所选选项推送到相应的输入，请转到

＆＃13;

＆＃13;

$(function() {

$(".minimal").each(function(){
    var value= $(this).val();
    
    var pattern = $(this).find('option:selected').data('pattern');
	
    $(this).nextAll('input[name=hostInput]').eq(0).attr('pattern', pattern);
    $(this).nextAll('input[name=hostInput]').eq(0).val(value);
    
    })
});

＆＃13;

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

＆＃13;

<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" hidden>Record</option>
    <option value="NS" selected 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" title="Wrong host"/>
  <br/>
  
   <br/>
  
    <select name="type" class="minimal">
    <option value="Record" 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" selected 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" title="Wrong host"/>
  <br/><br/>
  
   <select name="type" class="minimal">
    <option value="Record" hidden>Record</option>
    <option value="NS" selected 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" title="Wrong host"/>
  <br/>

</form>

＆＃13;

＆＃13;

＆＃13;