英文:
retrieve id and data and then build dropdown
问题
我从服务中收到以下数据。以下控制台日志在浏览器中打印如下：
console.log("Inside data");
console.log(data);
Inside data
[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]
如果我想使用jQuery构建一个选项标签，是否容易提取`id`作为`1,3和4`以及`name`作为选项标签的值参数并构建一个选择下拉菜单？
例如，如果我有以下代码，并且想让它像现在显示的那样工作。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var data = "[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]";
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars">
<option value="-">"Please Select"</option>
<option id="1" value="BOTTLE-1">BOTTLE-1</option>
<option id="3" value="BOTTLE-2">BOTTLE-2</option>
<option id="4" value="BOTTLE-3">BOTTLE-3</option>
</select>
<!-- end snippet -->
使用`append`方法构建部分应该很容易，但我想知道提取所需值是否容易。
英文:
I have the following data I'm receiving from the service. The following console logs prints the following in browser:
console.log("Inside data");
console.log(data);
Inside data
[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]
If I want to build a options tag using jQuery, is it easy to extract the id as 1,3 and 4 and name for the value parameter of options tag and build a select dropdown?
For example, if I've the following code and if I want to work it like it is showing now.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var data = "[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]";
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars">
<option value="-">"Please Select"</option>
<option id = "1" value="BOTTLE-1">BOTTLE-1</option>
<option id = "3" value="BOTTLE-2">BOTTLE-2</option>
<option id="4" value="BOTTLE-3">BOTTLE-3</option>
</select>
<!-- end snippet -->
Building part using append method should be easy but I am wondering if it's easy to extract the required values
答案1
得分: 0
以下是您的解决方案的翻译部分：
let data = "[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]";
let codingRegex = /id=\d+, name=BOTTLE-\d+/g;
let matches = data.match(codingRegex);
let cars = $("#cars");
matches.forEach(match => {
let temp = match.split(", ");
let id = temp[0].replace("id=", ""),
name = temp[1].replace("name=", "");
let option = new Option();
option.text = name;
option.value = id;
cars.append(option);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars">
<option value="-">"Please Select"</option>
</select>
请注意，代码部分已经翻译成中文，如有需要，请随时提出其他问题。
英文:
Here is my solution:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let data = "[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]";
let codingRegex = /id=\d+, name=BOTTLE-\d+/g;
let matches = data.match(codingRegex);
let cars = $("#cars");
matches.forEach(match => {
let temp = match.split(", ");
let id = temp[0].replace("id=", ""),
name = temp[1].replace("name=", "");
let option = new Option();
option.text = name;
option.value = id;
cars.append(option);
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars">
<option value="-">"Please Select"</option>
</select>
<!-- end snippet -->
答案2
得分: 0
let data = "[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]";
let label = "BOTTLE";
let regExString = "id=\\d+, name=" + label + "-\\d+";
let regExp = new RegExp(regExString, "ig");
let matches = data.match(regExp);
let cars = $("#cars");
matches.forEach(match => {
let temp = match.split(", ");
let id = temp[0].replace("id=", ""),
name = temp[1].replace("name=", "");
let option = new Option();
option.text = name;
option.value = id;
cars.append(option);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars">
<option value="-">"Please Select"</option>
</select>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let data = "[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]";
let label = "BOTTLE";
let regExString="id=\\d+, name="+label+"-\\d+";
let regExp=new RegExp(regExString,"ig");
let matches = data.match(regExp);
let cars = $("#cars");
matches.forEach(match => {
let temp = match.split(", ");
let id = temp[0].replace("id=", ""),
name = temp[1].replace("name=", "");
let option = new Option();
option.text = name;
option.value = id;
cars.append(option);
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars">
<option value="-">"Please Select"</option>
</select>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论