检索 ID 和数据，然后构建下拉菜单。

huangapple
go评论106阅读模式
英文:

retrieve id and data and then build dropdown

问题

  1. 我从服务中收到以下数据。以下控制台日志在浏览器中打印如下：
  3. console.log("Inside data");
  4. console.log(data);
  6. Inside data 
  7. [[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]
  9. 如果我想使用jQuery构建一个选项标签，是否容易提取`id`作为`1,3和4`以及`name`作为选项标签的值参数并构建一个选择下拉菜单？
  11. 例如，如果我有以下代码，并且想让它像现在显示的那样工作。
  13. <!-- begin snippet: js hide: false console: true babel: false -->
  15. <!-- language: lang-js -->
  17. var data = "[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]";
  19. <!-- language: lang-html -->
  21. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  22. <select name="cars" id="cars">
  23. <option  value="-">"Please Select"</option>
  24. <option id="1" value="BOTTLE-1">BOTTLE-1</option>
  25.   <option id="3" value="BOTTLE-2">BOTTLE-2</option>
  26.   <option id="4" value="BOTTLE-3">BOTTLE-3</option>
  27. </select>
  29. <!-- end snippet -->
  31. 使用`append`方法构建部分应该很容易，但我想知道提取所需值是否容易。
英文:

I have the following data I'm receiving from the service. The following console logs prints the following in browser:

  1. console.log(&quot;Inside data&quot;);
  2. console.log(data);
  4. Inside data 
  5. [[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 -->

  1. var data = &quot;[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]&quot;;

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;select name=&quot;cars&quot; id=&quot;cars&quot;&gt;
  3. &lt;option  value=&quot;-&quot;&gt;&quot;Please Select&quot;&lt;/option&gt;
  4. &lt;option id = &quot;1&quot; value=&quot;BOTTLE-1&quot;&gt;BOTTLE-1&lt;/option&gt;
  5.   &lt;option id = &quot;3&quot; value=&quot;BOTTLE-2&quot;&gt;BOTTLE-2&lt;/option&gt;
  6.   &lt;option id=&quot;4&quot; value=&quot;BOTTLE-3&quot;&gt;BOTTLE-3&lt;/option&gt;
  7. &lt;/select&gt;

<!-- 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

以下是您的解决方案的翻译部分：

  1. let data = "[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]";
  3. let codingRegex = /id=\d+, name=BOTTLE-\d+/g;
  4. let matches = data.match(codingRegex);
  5. let cars = $("#cars");
  6. matches.forEach(match => {
  7.   let temp = match.split(", ");
  8.   let id = temp[0].replace("id=", ""),
  9.     name = temp[1].replace("name=", "");
  10.   let option = new Option();
  11.   option.text = name;
  12.   option.value = id;
  13.   cars.append(option);
  14. });
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <select name="cars" id="cars">
  3.   <option value="-">"Please Select"</option>
  4. </select>

请注意，代码部分已经翻译成中文，如有需要，请随时提出其他问题。

英文:

Here is my solution:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let data = &quot;[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]&quot;;
  3. let codingRegex = /id=\d+, name=BOTTLE-\d+/g;
  4. let matches = data.match(codingRegex);
  5. let cars = $(&quot;#cars&quot;);
  6. matches.forEach(match =&gt; {
  7.   let temp = match.split(&quot;, &quot;);
  8.   let id = temp[0].replace(&quot;id=&quot;, &quot;&quot;),
  9.     name = temp[1].replace(&quot;name=&quot;, &quot;&quot;);
  10.   let option = new Option();
  11.   option.text = name;
  12.   option.value = id;
  13.   cars.append(option);
  14. });

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;select name=&quot;cars&quot; id=&quot;cars&quot;&gt;
  3.   &lt;option value=&quot;-&quot;&gt;&quot;Please Select&quot;&lt;/option&gt;
  4. &lt;/select&gt;

<!-- end snippet -->

答案2

得分: 0

  1. let data = "[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]";
  2. let label = "BOTTLE";
  3. let regExString = "id=\\d+, name=" + label + "-\\d+";
  4. let regExp = new RegExp(regExString, "ig");
  5. let matches = data.match(regExp);
  6. let cars = $("#cars");
  7. matches.forEach(match => {
  8.   let temp = match.split(", ");
  9.   let id = temp[0].replace("id=", ""),
  10.     name = temp[1].replace("name=", "");
  11.   let option = new Option();
  12.   option.text = name;
  13.   option.value = id;
  14.   cars.append(option);
  15. });
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <select name="cars" id="cars">
  3.   <option value="-">"Please Select"</option>
  4. </select>
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let data = &quot;[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]&quot;;
  2. let label = &quot;BOTTLE&quot;;
  3. let regExString=&quot;id=\\d+, name=&quot;+label+&quot;-\\d+&quot;;
  4. let regExp=new RegExp(regExString,&quot;ig&quot;);
  5. let matches = data.match(regExp);
  6. let cars = $(&quot;#cars&quot;);
  7. matches.forEach(match =&gt; {
  8.   let temp = match.split(&quot;, &quot;);
  9.   let id = temp[0].replace(&quot;id=&quot;, &quot;&quot;),
  10.     name = temp[1].replace(&quot;name=&quot;, &quot;&quot;);
  11.   let option = new Option();
  12.   option.text = name;
  13.   option.value = id;
  14.   cars.append(option);
  15. });

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;select name=&quot;cars&quot; id=&quot;cars&quot;&gt;
  3.   &lt;option value=&quot;-&quot;&gt;&quot;Please Select&quot;&lt;/option&gt;
  4. &lt;/select&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月6日 10:46:36
  • 转载请务必保留本文链接：https://go.coder-hub.com/76625186.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定