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

我有一些下拉字段，它会触发一个弹出窗口，允许用户输入一个值。我希望此值显示在此处的按钮中：

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

右侧指示器： 选择 移动平均线 指数移动平均线 比较国： 选择 = >

---

好的，我想我已经正确地进行了重构，我更改了指标的顺序，因为它们看起来是向后的：

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

这里是一个您可以使用它并查看此解决方案是否满足您的需求的示例

简要说明

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

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>

然后，我们可以使用括号表示法将简单移动平均按钮的值以及指数字符串和指数数动态分配到输出对象的正确一侧：

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

另一种可能的解决办法

顺便说一句，你在你的版本中做了一些重复的事情，我在上面的重构中没有改变。如果我着手这个项目，我会在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();
});

---

如果你想搞乱它，这里有一个版本的例子。

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

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

这里是一个您可以使用它并查看此解决方案是否满足您的需求的示例

简要说明

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

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>

然后，我们可以使用括号表示法将简单移动平均按钮的值以及指数字符串和指数数动态分配到输出对象的正确一侧：

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

另一种可能的解决办法

顺便说一句，你在你的版本中做了一些重复的事情，我在上面的重构中没有改变。如果我着手这个项目，我会在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();
});

---

如果你想搞乱它，这里有一个版本的示例。

创建两个函数，如bellow

职能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>

---

以这个注释系统为例，它的工作方式与您想要的相同：

创建两个类似于bellow的函数

职能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>

---

以该注释系统为例，它的工作方式与您所需的相同：

创建一个函数，从3中获取值，然后选择并将它们连接到按钮中。在获取每个值后调用该函数。创建一个函数，从3个select中获取值，并将它们连接到按钮中。获取每个值后调用该函数。