jquery - 条件 jQuery 字符串
问题描述
我创建了几个输入和一个下拉菜单，将其输入到 JavaScript 命令中以创建自定义句子。用户输入或选择的任何内容都会添加到句子框架中。当用户选择提交时，句子被创建。这很简单。我在从一个下拉菜单中添加多个输入到句子中时遇到了麻烦。
如果用户在下拉菜单中除了选择“usb ports”之外还选择了“navigation”，它在句子中的格式为：“It has these options:navigation, aux”。同样，如果选择了三个选项，则其格式为：“它具有以下选项：导航、辅助、USB 端口。”
如何编辑代码，以便如果选择了两个选项，则“和”将它们分开。“它有这些选项：导航和辅助。” 此外，如果选择了更多选项中的三个，则“和”将出现在最后一个值之前。“它有以下选项：导航、辅助和 USB 端口。”
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<style type="text/css">
table,
td,
th {
margin-left: auto;
margin-right: auto
}
.display {
display: flex;
align-items: center;
justify-content: center;
}
p {
text-align: center;
}
textarea {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
});
})
</script>
<script type="text/javascript">
function sentence() {
document.getElementById("s1").value = ""; // reset
document.getElementById("s1").style.display = "block";
document.getElementById("r1").style.display = "block";
if (document.getElementById("z1").value == "") {
alert("Year, Make, and Model are needed");
document.getElementById("z1").focus();
} else if (document.getElementById("z2").value == "") {
alert("Mileage is needed");
} else if (document.getElementById("z3").value == "") {
alert("Exterior color is needed");
} else {
const input1 = document.getElementById("z1").value;
const input2 = document.getElementById("z2").value;
const input3 = document.getElementById("z3").value;
var input4 = $('#z4').val();
document.getElementById("s1").value =
"Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in " +
input3 + ". It has these options: " + input4 + "."
}
}
function reset() {
document.getElementById("s1").value = "";
}
function hide() {
document.getElementById("s1").style.display = "none";
document.getElementById("r1").style.display = "none";
}
</script>
</head>
<body onload="hide()">
<table>
<tr>
<td>
<input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100">
</td>
<td>
<input type="text" id="z2" placeholder="Mileage" name="name" maxlength="100">
</td>
<td>
<input type="text" id="z3" placeholder="Exterior Color" name="name" maxlength="100">
</td>
<td>
<select data-placeholder="Options" name="options" id="z4" multiple class="chosen-select">
<option value=""></option>
<option value=" navigation">Navigation</option>
<option value=" aux">Aux</option>
<option value=" usb ports">USB Ports</option>
<option value=" heated seats">Heated Seats</option>
</select>
</td>
</tr>
<tr>
</table>
<br>
<div class="display">
<button onclick="sentence()"> Submit </button>
</div>
<hr>
<br>
<textarea rows="10" cols="100" id="s1"></textarea>
<br>
<div class="display">
<button onclick="reset()" id="r1">Reset</button>
</div>
</body>
</html>解决方案
是 Chosen 提供的input4数组。
您只需要遍历该数组中的值并做您喜欢的事情......就像在最后一个值之前添加逗号和“and”。
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<style type="text/css">
table,td,th {margin-left: auto;margin-right: auto}
.display {display: flex;align-items: center;justify-content: center;}
p {text-align: center;}
textarea {display: block;margin-left:auto;margin-right: auto;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
});
})
</script>
<script type="text/javascript">
function sentence() {
document.getElementById("s1").value = "";// reset
document.getElementById("s1").style.display = "block";
document.getElementById("r1").style.display = "block";
if (document.getElementById("z1").value == "") {
alert("Year, Make, and Model are needed");
document.getElementById("z1").focus();
}
else if (document.getElementById("z2").value == "") {
alert("Mileage is needed");
}
else if (document.getElementById("z3").value == "") {
alert("Exterior color is needed");
}
else {
const input1 = document.getElementById("z1").value;
const input2 = document.getElementById("z2").value;
const input3 = document.getElementById("z3").value;
var input4 = $('#z4').val();
// =======================================
console.log(input4); // It is an array.
var input4Formatted = "";
if(input4.length==1){
// Only one value...
input4Formatted = input4[0];
}
if(input4.length==2){
// Two values... Just add and "and"
input4Formatted = input4[0]+" and"+input4[1];
}
if(input4.length>2){
// more than 2 values...
for(i=0;i<input4.length-1;i++){
input4Formatted += input4[i]+",";
}
input4Formatted += " and"+input4[input4.length-1];
}
// =======================================
document.getElementById("s1").value =
"Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in "
+ input3 + ". It has these options: " +input4Formatted+ "."
}
}
function reset() {
document.getElementById("s1").value = "";
}
function hide() {
document.getElementById("s1").style.display = "none";
document.getElementById("r1").style.display = "none";
}
</script>
</head>
<body onload="hide()">
<table>
<tr>
<td>
<input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100">
</td>
<td>
<input type="text" id="z2" placeholder="Mileage" name="name" maxlength="100">
</td>
<td>
<input type="text" id="z3" placeholder="Exterior Color" name="name" maxlength="100">
</td>
<td>
<select data-placeholder="Options" name="options" id="z4" multiple class="chosen-select">
<option value=""></option>
<option value=" navigation">Navigation</option>
<option value=" aux">Aux</option>
<option value=" usb ports">USB Ports</option>
<option value=" heated seats">Heated Seats</option>
</select>
</td>
</tr>
<tr>
</table>
<br>
<div class="display">
<button onclick="sentence()"> Submit </button>
</div>
<hr>
<br>
<textarea rows="10" cols="100" id="s1"></textarea>
<br>
<div class="display">
<button onclick="reset()" id="r1">Reset</button>
</div>
</body>
</html>推荐阅读
- php - 注册成功后跳转到首页
- kubernetes - ERR_TOO_MANY_REDIRECTS 302 与 ELK Operator 7.10.0 使用 Server.basePath
- java - 检查项目的 Maven 构建生命周期的特定阶段的目标
- json - 是否有用于自动刷新 JSON 展平过程的原生雪花功能？
- python - matplotlib 为不同的子图设置定位器
- c# - 从片段返回到上一个列表视图的 PopBackStack 不再显示数据 xamarin.android
- javascript - childNode.remove() 似乎不起作用
- python - 更改 QStackedWidget 索引的问题
- python - 如何从用户输入替换列表中的某个字符串？
- python - 为什么我的 Python 代码从 Microsoft Dynamics 365 CRM API 获得 401 访问被拒绝？