有许多选择框和输入框。我写了一个身体时写的功能。我的功能将选中"选择框"值,并将模式发送到输入。我的问题是此代码将重复所有字段的模式,例如如果选择框是" 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-Zd]|[a-zA-Zd][a-zA-Zd-]*[a-zA-Zd]).)*([A-Za-zd]|[A-Za-zd][A-Za-zd-]*[A-Za-zd])" 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-Zd]|[a-zA-Zd][a-zA-Zd-]*[a-zA-Zd]).)*([A-Za-zd]|[A-Za-zd][A-Za-zd-]*[A-Za-zd])" 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>
用户在您的input[name=hostInput]
上使用$.each()
循环。
然后使用$(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;
}
<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-Zd]|[a-zA-Zd][a-zA-Zd-]*[a-zA-Zd]).)*([A-Za-zd]|[A-Za-zd][A-Za-zd-]*[A-Za-zd])" 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-Zd]|[a-zA-Zd][a-zA-Zd-]*[a-zA-Zd]).)*([A-Za-zd]|[A-Za-zd][A-Za-zd-]*[A-Za-zd])" 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" data-pattern="(?!d+(?:.d+){3}$)(([a-zA-Zd]|[a-zA-Zd][a-zA-Zd-]*[a-zA-Zd]).)*([A-Za-zd]|[A-Za-zd][A-Za-zd-]*[A-Za-zd])" 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>
<option value="TX" 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">TX </option>
</select>
<br/>
<input type="text" name="hostInput" placeholder="Hostname" class="to_validate" title="Wrong host" />
<br/>
</form>
如果要将所选选项推向相应的输入,则在这里
$(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);
})
});
.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-Zd]|[a-zA-Zd][a-zA-Zd-]*[a-zA-Zd]).)*([A-Za-zd]|[A-Za-zd][A-Za-zd-]*[A-Za-zd])" 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-Zd]|[a-zA-Zd][a-zA-Zd-]*[a-zA-Zd]).)*([A-Za-zd]|[A-Za-zd][A-Za-zd-]*[A-Za-zd])" 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-Zd]|[a-zA-Zd][a-zA-Zd-]*[a-zA-Zd]).)*([A-Za-zd]|[A-Za-zd][A-Za-zd-]*[A-Za-zd])" 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>