文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用jQuery一起显示选定的值？

问如何使用jQuery一起显示选定的值？
EN

Stack Overflow用户

提问于 2020-01-19 20:59:37

回答 2查看 78关注 0票数 1

我有一些下拉字段，它触发了一个弹出式，允许用户输入一个值。我希望这个值出现在这里的按钮中：

<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value should appear here</button>

我能够在<button>中获得最近选定的值，但不能将所有三个值放在一起显示。以下是完整的源代码：

   $("#comparator_indicator").on('change', function() {
   		var comparator_value = $(this).val();
   		$("#moving_average_output").text(comparator_value);
   });
   $("#right_side_indicator_select-me").on('change', function() {
    //alert($(this).val());
    if ($(this).val() == 1) {
      $("#myModal_first").modal('show');
    }else if($(this).val() == 2) {
      $('#simple_moving_average').val('');
      $("#myModal_second").modal('show');
    }
   });
   $("#movingaveragebutton").on('click', function(event) {
      event.preventDefault();
      simplemovingaverage = $("#simple_moving_average").val();
      $("#moving_average_output").text(simplemovingaverage);
   });
   $("#exponentialbutton").on('click', function(event) {
      event.preventDefault();
      exponentialstring = $("#exponentialstring").val();
      exponentialnumber = $("#exponentialnumber").val();
      $("#moving_average_output").text(exponentialstring+','+exponentialnumber);
   });

/*   ----------------------right side -------------------------------------------*/

	$("#left_indicator_side_select-me").on('change', function() {
    //alert($(this).val());
    if ($(this).val() == 1) {
      $("#myModal_first").modal('show');
    }else if($(this).val() == 2) {
      $('#simple_moving_average').val('');
      $("#myModal_second").modal('show');
    }
   });
   $("#movingaveragebutton").on('click', function(event) {
      event.preventDefault();
      simplemovingaverage = $("#simple_moving_average").val();
      $("#moving_average_output").text(simplemovingaverage);
   });
   $("#exponentialbutton").on('click', function(event) {
      event.preventDefault();
      exponentialstring = $("#exponentialstring").val();
      exponentialnumber = $("#exponentialnumber").val();
      $("#moving_average_output").text(exponentialstring+','+exponentialnumber);
   });

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

               <div class="row block-9">
                  <div class="col-md-4 pr-md-4">
                     <div class="form-group">
                        <label for="sel1">Right Side Indicator:</label>
                        <select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
                           <option>Select</option>
                           <option value="1">Moving Average</option>
                           <option value="2">Exponential Moving Average</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-md-4 pr-md-4">
                     <div class="form-group">
                        <label for="sel1">Comparator:</label>
                        <select class="form-control" id="comparator_indicator" name="comparator_indicator">
                           <option>Select</option>
                           <option value="=">=</option>
                           <option value=">">></option>
                           <option value="<"><</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-md-4 pr-md-4">
                     <div class="form-group">
                        <label for="sel1">Left Side Indicator:</label>
                        <select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
                           <option>Select</option>
                           <option value="1">Moving Average</option>
                           <option value="2">Exponential Moving Average</option>
                        </select>
                     </div>
                  </div>
               </div>










               <div class="form-group">
                  <label for="sel1">Selected values</label>
                  <button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">value will display here</button>
               </div>


               <div class="form-group">
                  <div id="myModal_first" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content">
                           <div class="modal-body">
                              <input type="text" name="simple_moving_average" id="simple_moving_average" class="form-control" placeholder="TEXT">
                           </div>
                           <button type="button" id="movingaveragebutton" name="movingaveragebutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <div id="myModal_second" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content">
                           <div class="modal-body">
                              <div class="row block-9">
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="exponentialstring" name="exponentialstring">
                                          <option>SELECT THE OPTIONS</option>
                                          <option value="open">OPEN</option>
                                          <option value="close">CLOSE</option>
                                          <option value="low">LOW</option>
                                          <option value="high">HIGH</option>
                                       </select>
                                    </div>
                                 </div>
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="exponentialnumber" name="exponentialnumber">
                                          <option>SELECT THE OPTIONS</option>
                                          <option>1</option>
                                          <option>2</option>
                                          <option>3</option>
                                          <option>4</option>
                                          <option>5</option>
                                          <option>6</option>
                                          <option>7</option>
                                          <option>8</option>
                                          <option>9</option>
                                          <option>10</option>
                                       </select>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <button type="button" id="exponentialbutton" name="exponentialbutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>

如果运行该示例，您将看到在<button>中只显示了最近输入的值。

css

javascript

php

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-01-19 21:21:36

好的，我认为这个重构是正确的，我改变了你的指标的顺序，因为它们看起来是向后的：

<div class="col-md-4 pr-md-4">
   <div class="form-group">
      <label for="sel1">Left Side Indicator:</label>
      <select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
         <option>Select</option>
         <option value="1">Moving Average</option>
         <option value="2">Exponential Moving Average</option>
      </select>
   </div>
</div>

<div class="col-md-4 pr-md-4">
   <div class="form-group">
      <label for="sel1">Comparator:</label>
      <select class="form-control" id="comparator_indicator" name="comparator_indicator">
         <option>Select</option>
         <option value="=">=</option>
         <option value=">">></option>
         <option value="<"><</option>
      </select>
   </div>
</div>

<div class="row block-9">
   <div class="col-md-4 pr-md-4">
      <div class="form-group">
         <label for="sel1">Right Side Indicator:</label>
         <select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
            <option>Select</option>
            <option value="1">Moving Average</option>
            <option value="2">Exponential Moving Average</option>
         </select>
      </div>
   </div>
</div>

 <div class="form-group">
    <label for="sel1">Selected values</label>
    <button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value goes here</button>
 </div>

下面是重构的JS (注意，我从示例中删除了最后两个事件处理程序，因为它们是不需要的)：

const output = {

  left: '',
  compare: '',
  right: '',

  toString: function() {
    return `${this.left} ${this.compare} ${this.right}`;
  },

};

let sideIndicator = '';

$("#left_indicator_side_select-me").on('change', function() {
  sideIndicator = 'left';
  if ($(this).val() == 1) {
    $("#myModal_first").modal('show');
  }else if($(this).val() == 2) {
    $('#simple_moving_average').val('');
    $("#myModal_second").modal('show');
  }
});

$("#comparator_indicator").on('change', function() {
  output.compare = $(this).val();
  $("#moving_average_output").text(output.toString());
});

$("#right_side_indicator_select-me").on('change', function() {
  sideIndicator = 'right';
  if ($(this).val() == 1) {
    $("#myModal_first").modal('show');
  }else if($(this).val() == 2) {
    $('#simple_moving_average').val('');
    $("#myModal_second").modal('show');
  }
});

$("#movingaveragebutton").on('click', function(event) {
  event.preventDefault();
  output[sideIndicator] = $("#simple_moving_average").val();
  $("#moving_average_output").text(output.toString());
});

$("#exponentialbutton").on('click', function(event) {
  event.preventDefault();
  exponentialstring = $("#exponentialstring").val();
  exponentialnumber = $("#exponentialnumber").val();
  output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
  $("#moving_average_output").text(output.toString());
});

这里有一个JSFiddle，您可以在这里使用它，看看这个解决方案是否满足您的需要。

简略解释

我创建了一个对象output，它将保存#moving_average_output <button>元素的文本。这些属性将保存页面上同名元素的文本：

const output = {

  left: '',
  compare: '',
  right: '',

  toString: function() {
    return `${this.left} ${this.compare} ${this.right}`;
  },

};

因此，output.left将具有来自此HTML元素的文本内容：

<div class="col-md-4 pr-md-4">
   <div class="form-group">
      <label for="sel1">Left Side Indicator:</label>
      <select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
         <option>Select</option>
         <option value="1">Moving Average</option>
         <option value="2">Exponential Moving Average</option>
      </select>
   </div>
</div>

这是通过在全局范围中创建变量sideIndicator并将其设置为在“更改”事件处理程序中单击的下拉列表的一侧来实现的。下面是#left_handler_side_select-me事件处理程序的示例：

let sideIndicator = '';

$("#left_indicator_side_select-me").on('change', function() {
  sideIndicator = 'left';
  if ($(this).val() == 1) {
    $("#myModal_first").modal('show');
  }else if($(this).val() == 2) {
    $('#simple_moving_average').val('');
    $("#myModal_second").modal('show');
  }
});

然后，我们可以使用括号符号动态地将#simple_moving_average按钮和#指数字符串和#指数位的值分配到output对象的正确一侧：

$("#movingaveragebutton").on('click', function(event) {
  event.preventDefault();
  output[sideIndicator] = $("#simple_moving_average").val();
  $("#moving_average_output").text(output.toString());
});

$("#exponentialbutton").on('click', function(event) {
  event.preventDefault();
  exponentialstring = $("#exponentialstring").val();
  exponentialnumber = $("#exponentialnumber").val();
  output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
  $("#moving_average_output").text(output.toString());
});

对output.toString()的调用将返回格式正确的字符串作为按钮文本。

另一种可能的解决方案

顺便说一句，在您的版本中，您正在做一些重复的事情，而我在上面的refactor中并没有改变这些。如果我接近这个项目，我会在我的JS中做一些不同的事情。以下是另一种看待事物的方法：

const movingAverageOutput = document.getElementById('moving_average_output');
const simpleMovingAverage = document.getElementById('simple_moving_average');

const output = {

  left: '',
  compare: '',
  right: '',

  toString: function() {
    return `${this.left} ${this.compare} ${this.right}`;
  },

};

const triggerModal = (val) => {
  if (val == 1) return $("#myModal_first").modal('show');
  if (val == 2) {
    simpleMovingAverage.value = '';
    $("#myModal_second").modal('show');
  }
};

let sideIndicator = '';

const setSideIndicator = (id) => {
  if (id === 'left_indicator_side_select-me') return sideIndicator = 'left';
  if (id === 'right_side_indicator_select-me') return sideIndicator = 'right';
};

window.addEventListener('change', function(e) {
  triggerModal(e.target.value);
  setSideIndicator(e.target.id);
});

$("#comparator_indicator").on('change', function() {
  output.compare = $(this).val();
  movingAverageOutput.textContent = output.toString();
});

$("#movingaveragebutton").on('click', function(event) {
  output[sideIndicator] = simpleMovingAverage.value;
  movingAverageOutput.textContent = output.toString();
});

$("#exponentialbutton").on('click', function(event) {
  exponentialstring = $("#exponentialstring").val();
  exponentialnumber = $("#exponentialnumber").val();
  output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
  movingAverageOutput.textContent = output.toString();
});

这是一个JSFiddle的那个版本，如果你想搞乱它。

票数 1

Stack Overflow用户

发布于 2020-01-19 21:46:41

创建像下面这样的2个函数

职能1：

$(document).ready(function(){

 $('#my_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"add_data.php", //This is your page which inserts data in db
   method:"POST",
   data:form_data,
   dataType:"JSON",
   success:function(data)
   {
    if(data.error != '')
    {
     $('#error_message').html(data.error);

     load_my_data(); //This is second function name
    }
   }
  })
 });

现在！我们准备好这里的第二个功能了

     load_my_data();

     function load_my_data()
     {
      $.ajax({
       url:"fetch_data.php",
       method:"POST",
       success:function(data)
       {
        $('#display_data').html(data);
       }
      })
     }
});

在fetch_data.php中创建所有php和html代码，当数据以模态形式提交时，它将自动将数据显示在

<div id="display_data"></div>

这个div会显示错误

<div id="error_message"></div>

以这个注释系统为例，它的工作方式与您想要的一样：https://www.webslesson.info/2017/12/comments-system-using-php-and-ajax.html

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59814347

复制

相似问题

问如何使用jQuery一起显示选定的值？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery一起显示选定的值？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery一起显示选定的值？
EN