从JSON填充的选项选择中传递元素到控制器。

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

Pass element from option select populated from JSON to Controller

问题

以下是您提供的内容的翻译部分：

这是我的第一篇帖子，几个月来我能够找到正确的答案，但这一次卡住了。
我设法在JavaScript中创建了函数来创建依赖的级联下拉列表，当我选择汽车品牌时，下一个列表中会显示型号，再下一个列表中会显示系列。
但是无法将选择的位置发送到Java控制器。我对批评持开放态度 从JSON填充的选项选择中传递元素到控制器。 我会非常感谢任何帮助。

因此，视图如下所示：

  1. <form action="make" method="POST">
  2.     <div class="item">
  3.         <h3 class="item-title">选择汽车</h3>
  4.         <span class="year"></span>
  5.         <select id="name" name="name" class="wrapper" onchange="populateSelectModel(), populateSelectSeries()">
  6.             <option value="">--选择--</option>
  7.         </select>
  8.         <select id="model" name="model" onchange="populateSelectSeries()">
  9.             <option value="">--选择--</option>
  10.         </select>
  11.         <select id="seria" name="seria">
  12.             <option value="">--选择--</option>
  13.         </select>
  14.         <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
  15.         <button type="submit" class="btn-primary">提交</button>
  16.     </div>
  17. </form>

JavaScript部分：

  1. var selectBrand = document.getElementById("name");
  2. var selectModel = document.getElementById("model");
  3. var selectSeries = document.getElementById("seria");
  4. var ourData;
  5. var ourRequest = new XMLHttpRequest();
  6. ourRequest.open('GET', 'https://raw.githubusercontent.com/ahmetozalp/auto-cars-makes-models-types/master/cars.json');
  7. ourRequest.onload = function(){
  8.     ourData = JSON.parse(ourRequest.responseText);
  9.     var selectedBrand = populateSelectBrand(ourData);
  10.     populateSelectModel();
  11.     populateSelectSeries();
  12. };
  13. ourRequest.send();
  15. function populateSelectBrand(lista) {
  16.     for (var i = 0; i < lista.length; i++) {
  17.         selectBrand.innerHTML = selectBrand.innerHTML +
  18.             '<option value="">' + lista[i].brand + '</option>';
  19.     }
  20. }
  22. function populateSelectModel() {
  23.     selectModel.innerHTML = '<option value="">选择型号';
  24.     var jakIndex = selectBrand.selectedIndex - 1;
  25.     var howlong = ourData[jakIndex].models.length;
  26.     for (var i = 0; i < howlong; i++) {
  27.         selectModel.innerHTML = selectModel.innerHTML +
  28.             '<option value="">' + ourData[jakIndex].models[i].title + '</option>';
  29.     }
  30. }
  32. function populateSelectSeries() {
  33.     selectSeries.innerHTML = '<option value="">选择系列';
  34.     var jakiIndex = selectBrand.selectedIndex - 1;
  35.     var jakiIndexModelu = selectModel.selectedIndex - 1;
  36.     var howlong1 = ourData[jakiIndex].models[jakiIndexModelu].types;
  37.     for (var i = 0; i < howlong1.length; i++) {
  38.         selectSeries.innerHTML = selectSeries.innerHTML +
  39.             '<option value="">' + ourData[jakiIndex].models[jakiIndexModelu].types[i] + '</option>';
  40.     }
  41. }

最后，当我可以通过控制器从"name"、"model"、"series"中获取选择的值时，我得到的是空字符串（而不是null）。

Java控制器：

  1. @Controller
  2. @RequestMapping("make")
  3. public class MakeController {
  4.     @PostMapping
  5.     public String downloadMake(String name, String model, String seria) throws IOException {
  6.         return ("download");
  7.     }
  8. }

从IntelliJ的屏幕截图，调试时的情况。

英文:

This my very first post, for several months I was able to find correct answer but this time I stuck.
I manage to create in JavaScript functions to create dependent - cascade drop-down-lists, when I choose Car Brand, then Models are served in next list and series in another accordingly.
But can not send the chosen positions to Java Controller. Im open to criticism :-) Ill be very grateful for any help.

So the view looks as follows:

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

  1. 	&lt;form  action=make method=&quot;POST&quot;&gt;
  2. &lt;div class=&quot;item&quot;&gt;
  3. &lt;h3 class=&quot;item-title&quot;&gt;Choose car&lt;/h3&gt;
  4. &lt;span class=&quot;year&quot;&gt;&lt;/span&gt;
  5. &lt;select id=&quot;name&quot; name=&quot;name&quot; class=&quot;wrapper&quot;  onchange=&quot;populateSelectModel(), populateSelectSeries()&quot;&gt;
  6. &lt;option   value=&quot;&quot;&gt;--Select--&lt;/option&gt;
  7. &lt;/select&gt;
  8. &lt;select id=&quot;model&quot; name=&quot;model&quot; onchange=&quot;populateSelectSeries()&quot; &gt;
  9. &lt;option value=&quot;&quot;&gt;--Select--&lt;/option&gt;
  10. &lt;/select&gt;
  11. &lt;select id=&quot;seria&quot; name=&quot;seria&quot;&gt;
  12. &lt;option value=&quot;&quot;&gt;--Select--&lt;/option&gt;
  13. &lt;/select&gt;
  14. &lt;input type=&quot;hidden&quot; th:name=&quot;${_csrf.parameterName}&quot; th:value=&quot;${_csrf.token}&quot;/&gt;
  15. &lt;button type=&quot;submit&quot; class=&quot;btn-primary&quot;&gt;Submit&lt;/button&gt;
  16. &lt;/div&gt;
  17. &lt;/form&gt;

<!-- end snippet -->

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

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

  1. var selectBrand = document.getElementById(&quot;name&quot;);
  2. var selectModel = document.getElementById(&quot;model&quot;);
  3. var selectSeries = document.getElementById(&quot;seria&quot;);
  4. var ourData;
  5. var ourRequest = new XMLHttpRequest();
  6. ourRequest.open(&#39;GET&#39;, &#39;https://raw.githubusercontent.com/ahmetozalp/auto-cars-makes-models-types/master/cars.json&#39;);
  7. ourRequest.onload = function(){
  8. ourData = JSON.parse(ourRequest.responseText);
  9. var selectedBrand = populateSelectBrand(ourData);
  10. populateSelectModel();
  11. populateSelectSeries();
  12. };
  13. ourRequest.send();
  14. function populateSelectBrand(lista) {
  15. for (var i = 0; i &lt; lista.length; i++) {
  16. selectBrand.innerHTML = selectBrand.innerHTML +
  17. &#39;&lt;option value=&quot;&quot;&gt;&#39; + lista[i].brand + &#39;&lt;/option&gt;&#39;;
  18. }
  19. }
  20. function populateSelectModel() {
  21. selectModel.innerHTML = &#39;&lt;option value=&quot;&quot;&gt;Select model&#39;;
  22. var jakIndex = selectBrand.selectedIndex - 1;  
  23. var howlong = ourData[jakIndex].models.length;
  24. for (var i = 0; i &lt; howlong; i++) {
  25. selectModel.innerHTML = selectModel.innerHTML +
  26. &#39;&lt;option value=&quot;&quot;&gt;&#39; + ourData[jakIndex].models[i].title + &#39;&lt;/option&gt;&#39;;       
  27. }
  28. }
  29. function populateSelectSeries() {
  30. selectSeries.innerHTML = &#39;&lt;option value=&quot;&quot;&gt;Select series&#39;;
  31. var jakiIndex = selectBrand.selectedIndex -1 ;  
  32. var jakiIndexModelu = selectModel.selectedIndex-1;
  33. var howlong1 = ourData[jakiIndex].models[jakiIndexModelu].types;
  34. for (var i = 0; i &lt; howlong1.length; i++) { 
  35. selectSeries.innerHTML = selectSeries.innerHTML +
  36. &#39;&lt;option value=&quot;&quot;&gt;&#39; + ourData[jakiIndex].models[jakiIndexModelu].types[i] + &#39;&lt;/option&gt;&#39;;       
  37. }
  38. }

<!-- end snippet -->

==================================================================
Finally when I can get via Controller the selected values from "name","model","series" I`m getting empty Strings (not null)
Java Controller

  1. @Controller

@RequestMapping("make")
public class MAkeController {

  1. @PostMapping
  2. public String downloadMake(String name, String model, String seria) throws IOException {
  3. return (&quot;download&quot;);
  4. }

}

screen shot from IntelliJ, while debugging

答案1

得分: 0

在填充select下拉选项时，在所有三个函数中，您将option标签的值设置为空字符串 value=&quot;&quot;，如下所示：

  1. &lt;option value=&quot;&quot;&gt;

您还需要在option标签的value属性中设置相应的item。

例如，在populateSelectBrand函数中类似于以下内容：

  1. selectBrand.innerHTML = selectBrand.innerHTML + &#39;&lt;option value=&quot;&#39; + lista[i].brand + &#39;&quot;&gt;&#39; + lista[i].brand + &#39;&lt;/option&gt;&#39;;

在其他函数中也要执行相同的操作。

当您执行form提交时，将向服务器发送所选选项的值，而不是在UI屏幕上显示的label。

英文:

While populating the select drop-down options, you are setting option tag value as empty string value=&quot;&quot; in all the three functions as below

  1. &lt;option value=&quot;&quot;&gt;

You need to set the respective item in value attribute of option tag too.

For example, similar to below in populateSelectBrand function:

  1. selectBrand.innerHTML = selectBrand.innerHTML + &#39;&lt;option value=&quot;&#39; + lista[i].brand + &#39;&quot;&gt;&#39; + lista[i].brand + &#39;&lt;/option&gt;&#39;;

Do the same in other functions too.

When you do form submit, the selected option value will be sent to the server not the label displaying in thr UI screen.

huangapple
  • 本文由 发表于 2020年7月25日 00:34:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/63077782.html
  • java
  • javascript
匿名

发表评论

匿名网友

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

确定