значение не отображается в полях после выбора с помощью jquery - PullRequest
Новая
       12

значение не отображается в полях после выбора с помощью jquery

0 голосов
/ 27 января 2020

У меня возникла проблема.

  1. У меня есть несколько выпадающих меню.
  2. после выбора любой опции из выпадающего меню появится всплывающее окно.
  3. после выберите значение из этого всплывающего окна, чтобы оно отображалось под полем упоминания.

Проблема в том, пока я динамически добавляю еще один выпадающий список и выбираю значение из всплывающего окна, которое появляется после выбора из выпадающего списка. чтобы значение не отображалось в поле ниже. Я не знаю, где я допустил ошибку, пожалуйста, дайте мне знать. 

	$('#display_form_1').hide();
	$('#display_form_2').hide();
	$('#display_form_3').hide();
	

	$('#Increment_SMA_AND_EMA').on('click', function(){
		$('#display_form_1').show();
	});
	$('#Decrement_SMA_AND_EMA1').on('click', function(){
		$('#display_form_1').hide();
		$('#display_form_1').find('select').val('');
	});
	/*----------------------------------------------------*/
	$('#Increment_SMA_AND_EMA1').on('click', function(){
		$('#display_form_2').show();
	});
	$('#Decrement_SMA_AND_EMA2').on('click', function(){
		$('#display_form_2').hide();
		$('#display_form_2').find('select').val('');
	});
	/*----------------------------------------------------*/
	$('#Increment_SMA_AND_EMA2').on('click', function(){
		$('#display_form_3').show();
	});
	$('#Decrement_SMA_AND_EMA3').on('click', function(){
		$('#display_form_3').hide();
		$('#display_form_3').find('select').val('');
	});
	/*----------------------------------------------------*/
	$('#Increment_SMA_AND_EMA3').on('click', function(){
		$('#display_form_4').show();
	});
	
	/*----------------------------------------------------*/
  
     $(document).ready(function() {
        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();
});
   });
   $(document).ready(function() {
const movingAverageOutput = document.getElementById('moving_average_output1');
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-me1') return sideIndicator = 'left';
  if (id === 'right_side_indicator_select-me1') return sideIndicator = 'right';
};

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

$("#comparator_indicator1").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();
});
   });
      $(document).ready(function() {
        const movingAverageOutput2 = document.getElementById('moving_average_output2');
const simpleMovingAverage2 = 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) {
    simpleMovingAverage2.value = '';
    $("#myModal_second").modal('show');
  }
};

let sideIndicator = '';

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

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

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

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

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


</script>
<script type="text/javascript">
   $(document).ready(function() {
        const movingAverageOutput = document.getElementById('moving_average_output3');
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-me3') return sideIndicator = 'left';
  if (id === 'right_side_indicator_select-me3') return sideIndicator = 'right';
};

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

$("#comparator_indicator3").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();
});
   });
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
    <!-- 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>
</head>
<body>
<div class="row block-9">
<div class="col-md-3 pr-md-3">
   <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-3 pr-md-3">
   <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-3 pr-md-3">
      <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-2 pr-md-2">
      <div class="form-group">
         <label for="sel1">Increment:</label>
         <button type="button" id="Increment_SMA_AND_EMA" name="Increment_SMA_AND_EMA" class="btn-success col-xl-12 form-control">+</button>
      </div>
   </div>
   <div class="col-md-12 pr-md-12">
      <div class="form-group">
         <button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value goes here</button>
      </div>
   </div>
</div>


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

   <div class="col-md-1 pr-md-1">
      <div class="form-group">
         <label for="sel1">Increment:1</label>
         <button type="button" id="Increment_SMA_AND_EMA1" name="Increment_SMA_AND_EMA1" class="btn-success col-xl-12 form-control">+</button>
      </div>
   </div>
   <div class="col-md-1 pr-md-1">
      <div class="form-group">
         <label for="sel1">Decrement:1</label>
         <button type="button" id="Decrement_SMA_AND_EMA1" name="Decrement_SMA_AND_EMA1" class="btn-warning col-xl-12 form-control">-</button>
      </div>
   </div>
   <div class="col-md-12 pr-md-12">
      <div class="form-group">
         <button type="button" id="moving_average_output1" name="moving_average_output1" class="btn-primary col-xl-12 form-control">Value goes here</button>
      </div>
   </div>
</div>
<!-- --------------------------------------------------------------- -->



<!-- --------------------------------------------------------------- -->
<div class="row block-9" id="display_form_2">
<div class="col-md-3 pr-md-3">
   <div class="form-group">
      <label for="sel1">Left Side Indicator:2</label>
      <select class="form-control" id="left_indicator_side_select-me2" name="left_indicator_side_select-me2">
         <option>Select</option>
         <option value="1">Moving Average</option>
         <option value="2">Exponential Moving Average</option>
      </select>
   </div>
</div>

<div class="col-md-3 pr-md-3">
   <div class="form-group">
      <label for="sel1">Comparator:2</label>
      <select class="form-control" id="comparator_indicator2" name="comparator_indicator2">
         <option>Select</option>
         <option value="=">=</option>
         <option value=">">></option>
         <option value="<"><</option>
      </select>
   </div>
</div>
   <div class="col-md-3 pr-md-3">
      <div class="form-group">
         <label for="sel1">Right Side Indicator:2</label>
         <select class="form-control" id="right_side_indicator_select-me2" name="right_side_indicator_select-me2">
            <option>Select</option>
            <option value="1">Moving Average</option>
            <option value="2">Exponential Moving Average</option>
         </select>
      </div>
   </div>
   <div class="col-md-1 pr-md-1">
      <div class="form-group">
         <label for="sel1">Increment:2</label>
         <button type="button" id="Increment_SMA_AND_EMA2" name="Increment_SMA_AND_EMA2" class="btn-success col-xl-12 form-control">+</button>
      </div>
   </div>
   <div class="col-md-1 pr-md-1">
      <div class="form-group">
         <label for="sel1">Decrement:2</label>
         <button type="button" id="Decrement_SMA_AND_EMA2" name="Decrement_SMA_AND_EMA2" class="btn-warning col-xl-12 form-control">-</button>
      </div>
   </div>
   <div class="col-md-12 pr-md-12">
      <div class="form-group">
         <button type="button" id="moving_average_output2" name="moving_average_output2" class="btn-primary col-xl-12 form-control">Value goes here</button>
      </div>
   </div>
</div>
<!-- --------------------------------------------------------------- -->


<!-- --------------------------------------------------------------- -->
<div class="row block-9" id="display_form_3">
<div class="col-md-3 pr-md-3">
   <div class="form-group">
      <label for="sel1">Left Side Indicator:3</label>
      <select class="form-control" id="left_indicator_side_select-me3" name="left_indicator_side_select-me3">
         <option>Select</option>
         <option value="1">Moving Average</option>
         <option value="2">Exponential Moving Average</option>
      </select>
   </div>
</div>
<div class="col-md-3 pr-md-3">
   <div class="form-group">
      <label for="sel1">Comparator:3</label>
      <select class="form-control" id="comparator_indicator3" name="comparator_indicator3">
         <option>Select</option>
         <option value="=">=</option>
         <option value=">">></option>
         <option value="<"><</option>
      </select>
   </div>
</div>
   <div class="col-md-3 pr-md-3">
      <div class="form-group">
         <label for="sel1">Right Side Indicator:3</label>
         <select class="form-control" id="right_side_indicator_select-me3" name="right_side_indicator_select-me3">
            <option>Select</option>
            <option value="1">Moving Average</option>
            <option value="2">Exponential Moving Average</option>
         </select>
      </div>
   </div>
   <div class="col-md-2 pr-md-2">
      <div class="form-group">
         <label for="sel1">Decrement:10</label>
         <button type="button" id="Decrement_SMA_AND_EMA3" name="Decrement_SMA_AND_EMA3" class="btn-warning col-xl-12 form-control">-</button>
      </div>
   </div>
   <div class="col-md-12 pr-md-12">
      <div class="form-group">
         <button type="button" id="moving_average_output3" name="moving_average_output3" class="btn-primary col-xl-12 form-control">Value goes here</button>
      </div>
   </div>
</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>

<script type="text/javascript" src="main.js"></script>
</body>
</html>

Как вы видели на выходе. Проблема в том, что первый выпадающий список работает хорошо. но после динамического добавления другого раскрывающегося списка, поэтому выбор значений из них не отображается должным образом под полем. это меняет значение из всех полей.

...