將輸入文本與選項值匹配並自動選擇它
[英]Match an input text with a value of an option and auto select it
問題描述
我有一個輸入字段和一個選擇標簽，如下所示：
<input type="text" id="domain"/>
<select>
<option value=".com">.com</option>
<option value=".net">.net</option>
<option value=".org">.org</option>
</select>
<input type="submit" value="check" />
用戶輸入域名，從列表中選擇一個tld （ 域名擴展名 ），然后檢查域名。
例如，如果用戶在輸入字段中插入（ mynewdomain.com ），它將無法正常工作。 用戶必須在輸入中單獨插入域名，並從列表中選擇擴展名而不將其放在輸入字段中，否則會發生錯誤。
我將隱藏選擇標簽，因此需要在單擊復選按鈕時執行以下操作：
- 當用戶插入域名時，使輸入匹配並通過選擇選項的值調用擴展名。 例如，如果用戶插入（ mynewdomain.com ），則它應通過選項列表中的值
".com"自動選擇該擴展名。 - 從用戶添加的輸入字段（ .com，.net等 ）中刪除擴展名。
然后發送到服務器...
更新的JSFiddle示例說明了我正在嘗試做的事情。
如何使用JavaScript或jQuery實現此目的？ 如果有人可以幫助我，我將不勝感激。
注意：PHP是加密的，我只能使用JavaScript和jQuery解決。
6 個解決方案
解決方案1
1 2015-04-05 00:39:34
沒有jQuery：
您可以聽元素的input事件，匹配后面的字符. 字符，然后設置同級select元素的值：
document.getElementById('domain').addEventListener('input', function (e) { var match = e.target.value.match(/\\.(?=[A-Za-z])[A-Za-z]{2,3}/g); e.target.nextElementSibling.value = match ? match[0].toLowerCase() : ''; });
<input type="text" id="domain"/> <select> <option></option> <option value=".com">.com</option> <option value=".net">.net</option> <option value=".org">.org</option> </select> <input type="submit" value="check" />
沒有正則表達式，您還可以使用以下命令：
document.getElementById('domain').addEventListener('input', function (e) { var match = e.target.value.split('.'); e.target.nextElementSibling.value = match ? '.' + match[match.length - 1].toLowerCase() : ''; });
Original Code <br /> <input type="text" id="domain"/> <select> <option></option> <option value=".com">.com</option> <option value=".net">.net</option> <option value=".org">.org</option> </select> <input type="submit" value="check" />
解決方案2
1 2015-04-05 00:40:35
$("#domain").change(function(){
domainstr = $("#domain").text();
lastindex = domainstr.lastIndexOf(".");
if(lastindex > 0 ){
str = domainstr.substring(lastindex);
$("select").val(str);
}
});
解決方案3
1 2015-04-05 00:43:54
應該這樣做：
$('#domain').bind("keyup",function(event){
var tld = this.value.split('.')[1];
if(tld && $('select option[value="'+tld+'"]').length){
$('select').val(tld);
this.value = this.value.split('.')[0];
$('form').submit();
}
});
解決方案4
1 2015-04-05 00:53:12
像這樣
$(document).on("click", "#newSubmit", function(){
var input = $("#newDomain").val();
var stringLength = input.length;
var lastFourLetters = input.substr(stringLength - 4);
if(lastFourLetters == '.com' || lastFourLetters =='.net' || lastFourLetters == '.org'){
// Changes the select value
$("#newSelect option[value='" + lastFourLetters + "']").prop("selected", "selected");
var newString = $("#newDomain").val().substr(0, stringLength -4 );
// Takes out the address extension
$("#newDomain").val(newString);
}
});
解決方案5
1 已采納 2015-04-05 00:54:05
這應該很好
$(document).ready(function(){ var tldArray = new Array(); // Store each option value into tldArray $("select.hide > option").each(function(){ tldArray.push($(this).val()); }); $("#check").click(function(){ var s = $("#domain").val().split('.'); var choosenTld = '.'+s[s.length-1].toLowerCase(); // Get last value of the array, the TLD for (index = 0;index < tldArray.length;++index) { if (choosenTld.indexOf(tldArray[index]) >= 0 && tldArray[index].length == choosenTld.length) { $('select.hide').val(tldArray[index]); var newValue = $("#domain").val().toLowerCase().replace(tldArray[index],''); $("#domain").val(newValue); } } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="domain" value="mynewdomain.com" /> <select class="hide"> <option value=".com">.com</option> <option value=".net">.net</option> <option value=".org">.org</option> <option value=".co">.co</option> </select> <input id="check" type="submit" value="check" />
解決方案6
1 2015-04-05 01:08:17
另一種簡單的方法是使用indexOf查看存在的擴展名，然后剝離它。 請記住，您將需要做更多的錯誤處理，以確保您要執行的操作符合要求：
的HTML
<!DOCTYPE Html />
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="domain" />
<select id="domainExtension">
<option value=".com">.com</option>
<option value=".net">.net</option>
<option value=".org">.org</option>
</select>
<input type="submit" value="check" id="btnCheck"/>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
JAVASCRIPT
var btnCheck = document.getElementById("btnCheck");
var elDomain = document.getElementById("domainExtension");
var inputDomain = document.getElementById("domain");
btnCheck.onclick = function () {
var theExtension = getDomainExtension(inputDomain.value);
if (theExtension != false) {
elDomain.value = theExtension;
inputDomain.value = inputDomain.value.toString().replace(theExtension, "");
}
else {
alert("Extension not valud");
}
}
function getDomainExtension(url) {
if (url.indexOf(".com") > -1) {
return ".com";
}
else if (url.indexOf(".org") > -1) {
return ".org";
}
else if (url.indexOf(".net") > -1) {
return ".net";
}
else {
return false;
}
}
使用選擇選項在輸入中數值小於或等於大時顯示文本塊
[英]Display text block if number value is lower or higher in input with select option
Javascript 到 select 下拉選項使用來自文本輸入的值？
[英]Javascript to select dropdown option using value from text input?
選擇選項顯示輸入塊，然后輸入要計數的值並顯示另一個輸入值自動
[英]select option display input block and enter value that count and display another inptut value auto
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.