如何从少数几个选择中获得价值？

Question

例如，我有一张桌子，如下图所示

在这种情况下，可以看出，当我选择选项1.2和选项2时，它会给我一些数字/结果。如果我选择选项1.3和选项2，它将给我不同的数字/结果。

问题：当可以选择选项并获得结果时，如何将数据表示为下图：

Answer 1

您可以尝试

$(document).ready(function(){
            $("#selID").change(()=>{
                var c = $("#selID").find(":selected").text();
            console.log(c);
            })
        }
            )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="selID" id="selID" data-mini="true"><option value="1" selected="selected">Tithes</option><option value="2">Offering</option><option value="3">Designated</option><option class="selOptAddMore" value="0" >Add More...</option></select>

Answer 2

请参见下面的示例代码，以使用JQuery从下拉列表中获取文本/值。

<select name="ddlProduct" id="ddlProduct">
    <option value="1">TV</option>
    <option value="2">Laptop</option>
    <option value="3">Computer</option>
</select><br />


<input type="button" id="btnGet" name="btnGet" value="Get">


$("#btnGet").click(function(){
    var selectedText = $("option:selected", $("#ddlProduct")).text();
    var selectedValue = $("option:selected", $("#ddlProduct")).val();
    alert(selectedText + " :: " + selectedValue);
});

Answer 3

看看这个...

console.clear();

(function() {
  function _appendBefore(after, el) {
    after.parentNode.insertBefore(el, after);
  }
  function _appendAfter(after, el) {
    after.parentNode.insertBefore(el, after.nextSibling);
  }

  function _react() {
    var s1 = this["data-select-1"].value;
    var s2 = this["data-select-2"].value;
    var target = this["data-target"];

    if (parseInt(s1) && parseInt(s2)) {
      target.textContent = this.table.rows[s2].cells[s1].textContent
      this.table.rows[s2].cells[s1].classList.add('color')
    } else {
      target.textContent = ""  
    } 
    
  }

  function convert(selector) {
    var i,
      j,
      el,
      elements = document.querySelectorAll(selector),
      captions_1,
      captions_2,
      select_1,
      select_2,
      target,
      option;
    if (elements.length) {
      for (i = 0; i < elements.length; i++) {
        el = elements[i];
        captions_1 = el.querySelectorAll("th[scope=row]");
        select_1 = document.createElement("select");
        select_1.table = el;
        _appendAfter(el, select_1);
        option = document.createElement("option");
        option.append(document.createTextNode("Choose A"));
        option.setAttribute("value", 0);
        select_1.append(option);
        for (j = 0; j < captions_1.length; j++) {
          option = document.createElement("option");
          option.setAttribute("value", j + 1);
          option.append(document.createTextNode(captions_1[j].textContent));
          select_1.append(option);
        }
        select_1.addEventListener("change", _react);

        captions_2 = el.querySelectorAll("th[scope=col]");
        select_2 = document.createElement("select");
        select_2.table = el;
        _appendAfter(select_1, select_2);
        option = document.createElement("option");
        option.append(document.createTextNode("Choose B"));
        option.setAttribute("value", 0);
        select_2.append(option);
        for (j = 0; j < captions_2.length; j++) {
          option = document.createElement("option");
          option.setAttribute("value", j + 1);
          option.append(document.createTextNode(captions_2[j].textContent));
          select_2.append(option);
        }
        select_2.addEventListener("change", _react);

        target = document.createElement('div')
        _appendAfter(select_2, target);
        select_1["data-select-1"] = select_1;
        select_1["data-select-2"] = select_2;
        select_1["data-target"] = target;
        select_2["data-select-1"] = select_1;
        select_2["data-select-2"] = select_2;
        select_2["data-target"] = target;
      }
    }
  }

  self.UItableConvert = convert;
})();
UItableConvert(".substitute-with-dropdowns");

table.substitute-with-dropdowns {
  border: 1px solid red;
}
table.substitute-with-dropdowns th[scope=col] {
  background-color: #dfffdf;
}
table.substitute-with-dropdowns th[scope=row] {
  background-color: #dfdfff;
}
table.substitute-with-dropdowns td {
  padding: 3px;
}
table.substitute-with-dropdowns td.color {
  background-color: gold;
}

<table class="substitute-with-dropdowns">
  <tr>
    <th></th>
    <th scope="row">A1</th>
    <th scope="row">A2</th>
    <th scope="row">A3</th>
    <th scope="row">A4</th>
  </tr>
  <tr>
    <th scope="col">B1</th>
    <td>C(1,1)</td>
    <td>C(2,1)</td>
    <td>C(3,1)</td>
    <td>C(4,1)</td>
  </tr>
  <tr>
    <th scope="col">B2</th>
    <td>C(1,2)</td>
    <td>C(2,2)</td>
    <td>C(3,2)</td>
    <td>C(4,2)</td>
  </tr>
  <tr>
    <th scope="col">B3</th>
    <td>C(1,3)</td>
    <td>C(2,3)</td>
    <td>C(3,3)</td>
    <td>C(4,3)</td>
  </tr>
  <tr>
    <th scope="col">B4</th>
    <td>C(1,4)</td>
    <td>C(2,4)</td>
    <td>C(3,4)</td>
    <td>C(4,4)</td>
  </tr>
</table>

此处：https://codepen.io/HerrSerker/pen/MZZLRM?editors=1111