Question

我希望如果我选择75'000或100'000，则“ one”中的结果（见图2）为100或1000000。您能帮我吗？感谢您的帮助！

到目前为止，这是我的代码：

<div class="container content-center" id="margin">
  <form name="formcalc">
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">select</label>
      <select class="col-sm-10 form-control">
        <option>Default select</option>
        <option>75'000</option>
        <option>100'000</option>
      </select>
      <!-- <div class="col-sm-10">                   
                    <input type="tel" class="form-control" name="txtnum1">
                </div> -->
    </div>
    <fieldset disabled>
      <div class="form-group row">
        <label for="staticEmail" class="col-sm-2 col-form-label">One</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="n1" name="txtres" value="CHF " readonly>
        </div>
      </div>
      <div class="form-group row">
        <label for="staticEmail" class="col-sm-2 col-form-label">Two</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="n2" name="txtres2" value="CHF " readonly>
        </div>
      </div>
    </fieldset>
    <input type="button" id="btn6" class="btn btn-danger" value="Berechnen" onClick="sumValues();showDiv();">
    <button type="button" style="display:none;" class="btn btn-outline-danger" id="toggle" data-toggle="modal" data-target="#exampleModal">
                ohne Gewähr
            </button>
  </form>
  <hr class="featurette-divider">
</div>

enter image description here

Answer 1

<select id="selectOne" class="col-sm-10 form-control" onchange="setOne()">
    <option>Default select</option>
    <option>75'000</option>
    <option>100'000</option>
  </select>

. . . . . 
. . . . .
. . . . . 

<script>
  function setOne()
  {
       const selectOne = document.getElementById("selectOne");
       if (selectOne.options[selectOne.selectedIndex].text == "75'000")
           document.getElementById("n1").value = "100";
       else if (selectOne.options[selectOne.selectedIndex].text == "100'000")
           document.getElementById("n1").value = "1000000";
   }
</script>

Answer 2

确切的要求还不清楚，这听起来像是您在前端开发中的初学者。鉴于此，我将把这更多地作为一种学习经历，而不是对您的确切问题的确切答案，因此这里有一些假设：

基于标记，它看起来像是Bootstrap，因此，我假设jQuery可用（如果不包括jQuery，则Google搜索就很容易找到解决方法）。

我们还假设您只是在<script></script>结束标记之前添加一个</body>标记-这些标记内的是您的JavaScript代码所在的位置。

最后，正如我提到的，您的确切要求还不清楚，但是我知道，通常，当您从选择下拉列表中选择一个值时，您希望在文本框中设置一个值。因此，假设您的确切要求是：您有一个下拉列表和一个文本框。在下拉菜单（<select>中，您可以从2个值中选择：75,000和100,000。如果选择75,000，则文本框的值为100；如果选择100,000，则文本框的值为1000000。

好的，这是代码。它涉及所谓的事件侦听器-浏览器正在侦听用户事件，例如单击某些内容或更改您的选择下拉列表值。您将要编写代码来侦听并响应该事件。在jQuery中，通过使用.on()方法，语法非常清晰简洁。

给出此HTML：

<select id="mySelect">
    <option>Default select</option>
    <option value="75,000">75,000</option>
    <option value="100,000">100,000</option>
</select>

<input type="text" id="myTextbox">

您的JavaScript看起来像这样：

$('#mySelect').on('change', function() {
    let textboxValue;

    switch(this.value) {
        case '75,000':
            textboxValue = '100';
            break;
        case '100,000':
            textboxValue = '1000000';
            break;
        default:
            textboxValue = '';
    }

    $('#myTextbox').val(textboxValue);
});

以下是工作代码的JS小提琴：https://jsfiddle.net/j06sw8af/1/

这应该足以使您正确解决确切的问题。

使用选择标签进行计算

2 个答案: