Question

有一个选择框。以及具有Hostname特定模式的文本框。我正在考虑如何使用此文本框启用更改选择框更改的属性。在这种情况下，当我在我的选择框中选择的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>

Answer 2

<script>
function myFunction(){
 var select = document.getElementById('mySelect');
 var text = document.getElementById('myInputText');
 swicth(select.value){
  case 'Record':
      text.setAttribute('placeholder',' you placeholder');
      text.setAttribute('pattern','you pattern');
      break;
  case 'NS':
      text.setAttribute('placeholder',' you placeholder');
      text.setAttribute('pattern','you pattern');
      break;
  case 'MX':
      text.setAttribute('placeholder',' you placeholder');
      text.setAttribute('pattern','you pattern');
      break;
 }
}


</script>

 <form>


  <select name="type" class="minimal" id="mySelect" onchange="myFunction()">
    <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" id="myInputText" 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 3

这可能会对你有帮助。

function changePlaceHolder(value) {

    if (value === "MX") {

        document.getElementById("wrongHost").setAttribute("placeholder", "IP address");
        document.getElementById("wrongHost").setAttribute("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])");
        document.getElementById("wrongHost").setAttribute("title", "Wrong Ip");
    } else {
        // do something else 
    }

}

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

<form>


<select name="type" class="minimal" onchange="changePlaceHolder(this.value);">
    <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" id="wrongHost"  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>

如何更改One Input Onchange Selectbox

3 个答案: