Как отобразить несколько выпадающих значений в других html полях, используя jquery - PullRequest
Новая
       1

Как отобразить несколько выпадающих значений в других html полях, используя jquery

2 голосов
/ 06 февраля 2020
  1. У меня есть несколько выпадающих меню с текстовыми полями.
  2. Я хочу получить все эти значения и отобразить их на кнопке.
  3. Единственное условие - кнопка должна генерироваться до 5 время. означает -> если все значения выпадающего и текстового поля отображаются в поле кнопки, поэтому я хочу сгенерировать еще одну кнопку и снова хочу отобразить свое значение, нажав кнопку «Создать». Вот мой код для справки. 

$('#left_indicator').on('change', function(event) {
    event.preventDefault();
    /* Act on the event */
    if ($(this).val()=='sma') {
      $("#left_period_guider").html('(period,offset)');
    }else if ($(this).val()=='ema') {
      $("#left_period_guider").html('(close,period,offset)');
    }
    
  });
  $('#right_indicator').on('change', function(event) {
    event.preventDefault();
    /* Act on the event */
    if ($(this).val()=='sma') {
      $("#right_period_guider").html('(period,offset)');
    }else if ($(this).val()=='ema') {
      $("#right_period_guider").html('(close,period,offset)');
    }
    
  });
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<!-- 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>

    <select name="left_indicator" id="left_indicator">
      <option>select</option>
      <option value="sma">sma</option>
      <option value="ema">ema</option>
    </select>
    <input type="text" name="left_PeriodAndOffset" id="left_PeriodAndOffset" placeholder="e.g (10.2)">
    <div id="left_period_guider"></div>
    <select name="comparator" id="comparator">
      <option>select</option>
      <option value="=">=</option>
      <option value="<"><</option>
    </select>


    <select name="right_indicator" id="right_indicator">
      <option>select</option>
      <option value="sma">sma</option>
      <option value="ema">ema</option>
    </select>
    <input type="text" name="right_PeriodAndOffset" id="right_PeriodAndOffset" placeholder="e.g (10.2)">
    <div id="right_period_guider"></div>

    <button type="button" id="generateButton" name="generateButton">click to generate button upto 5 with remove button</button>
    <hr>

    This button should generate by clicking above the button with the all field provided values.
    example : sma(10.2) < ema(3.2)
    <button type="button" id="generated1" name="generated1" value="">value will display here</button>
    <button type="button" id="removethis" name="removethis">removethis</button>
    
</div>
</body>
</html>

Как вы можете видеть здесь, я просто ожидаю решения, так как все значения раскрывающегося списка и текстового поля должны отображаться на кнопке и генерировать кнопку, так что я может делать те же стратегии на другой кнопке до 5 раз. поэтому значение должно отображаться на каждой сгенерированной кнопке, как. sma (10.2)

Ответы [ 2 ]

1 голос
/ 06 февраля 2020

Следующий код сделает работу!

Для лучшей проверки я добавил имя класса 'chk', чтобы проверить все поля ввода. Это будет использоваться для проверки и генерации данных кнопок. Обратите внимание, что я также добавил в поля выбора пустое свойство value, которое требуется для этого кода. 

var data='';
var btnid=0;
function generateBtn(data){
    btnid++;
    var btns='<button type="button" id="generated'+btnid+'" name="generated'+btnid+'" value="" data-id="'+btnid+'">'+data+'</button><button type="button" id="removethis" class="removethis" data-id="'+btnid+'">removethis</button>';
    $('#container').append(btns);
}
function check_inputs() {
    var i=0;
    //validation to check for empty inputs
    //Same loop used to generate valid Button' Data
    
    data='';
    //we reset Data
    $('.chk').each(function(){
        
        if( $(this).val() === "" ){
          $(this).css({'border-color':'red','border-size':'3px'}); 
        } else{
            $(this).css({'border-color':'green','border-size':'3px'});
            if($(this).is('input')){
                data+='('+$(this).val()+')';
            } else {
                data+=' '+$(this).val();
            }
            
            i++;
        }
    });
    if(i==$('.chk').length){
    //We gernerate the button
    generateBtn(data);
    } else{
        return;
    }
}

//Dynamically generated buttons are non-Dom, so we base selction on the parent container
//Data-id attribute is used to match targeted buttons
$("#container").on('click','.removethis', function() {
        $('button[data-id='+$(this).data('id')+']').remove();
});    
$("#generateButton").on('click', function() {  
    //Because we can remove buttons
    //We count generated buttons before generating more than 5
    if($("[id^=generated]").length<5){
    check_inputs();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <select name="left_indicator" id="left_indicator" class="chk">
      <option value="">select</option>
      <option value="sma">sma</option>
      <option value="ema">ema</option>
    </select>
    <input type="text" name="left_PeriodAndOffset" id="left_PeriodAndOffset" placeholder="e.g (10.2)" class="chk">
    <div id="left_period_guider"></div>
    <select name="comparator" id="comparator" class="chk">
      <option value="">select</option>
      <option value="=">=</option>
      <option value="<"><</option>
    </select>


    <select name="right_indicator" id="right_indicator" class="chk">
      <option value="">select</option>
      <option value="sma">sma</option>
      <option value="ema">ema</option>
    </select>
    <input type="text" name="right_PeriodAndOffset" id="right_PeriodAndOffset" placeholder="e.g (10.2)" class="chk">
    <div id="right_period_guider"></div>

    <button type="button" id="generateButton" name="generateButton">click to generate button upto 5 with remove button</button>
    <hr>
</div>

Я прокомментировал код, но я предлагаю вам пересмотреть код HTML для мелких (нестандартных) ошибок. Просто обратить внимание на то, что уникально, а что нет! Я не знаю, должно ли это быть в <form> или нет, например, нужно повторять свойство имени в кнопках.

1 голос
/ 06 февраля 2020

Исходя из вашего вопроса, я не уверен, куда поместить кнопки, поэтому я предполагал поместить его в конец документа. Чтобы сделать это даже проще, я добавил div в конце перед закрытием тела. 

<div id="displayButtons" style="display:block;">

Затем вы можете добавить следующий код в тег script, чтобы достичь того, что вы ищете. 

    var buttonCount = 0;
$('#generateButton').click(function () {
    if (buttonCount < 5) {
        // Get all values
        let left_indicator = $("#left_indicator").val();
        let left_PeriodAndOffset = $("#left_PeriodAndOffset").val();
        let comparator = $("#comparator").val();
        let right_indicator = $("#right_indicator").val();
        let right_PeriodAndOffset = $("#right_PeriodAndOffset").val();

        // Define Button to display
        let buttonText = left_indicator + " (" + left_PeriodAndOffset + ") " + comparator + " " + right_indicator + " (" + right_PeriodAndOffset + ")";
        let button = '<button id="' + buttonCount + '">' + buttonText + '</button>';

        // Display button inside Div
        $("#displayButtons").append(button);
        buttonCount++;
    } else {
        alert("Limit of 5 reached");
    }
})

$("#removethis").click(function () {
    if (buttonCount > 0) {
        $("#displayButtons > button:last-child").remove();
        buttonCount--;
    }
    else {
        alert("No more buttons to remove.");
    }

})

Еще одна вещь, которую я хотел бы упомянуть, это: 

 $('#left_indicator').on('change', function (event) {
    event.preventDefault();
    /* Act on the event */
    if ($(this).val() == 'sma') {
        $("#left_period_guider").text('(period,offset)');  <== I think you need to replace html with text to display what you require..
    } else if ($(this).val() == 'ema') {
        $("#left_period_guider").text('(close,period,offset)');
    }

});

Я надеюсь, это то, что вы искали ...

Полный рабочий код: 

var buttonCount = 0;
$('#generateButton').click(function () {
    if (buttonCount < 5) {
        // Get all values
        let left_indicator = $("#left_indicator").val();
        let left_PeriodAndOffset = $("#left_PeriodAndOffset").val();
        let comparator = $("#comparator").val();
        let right_indicator = $("#right_indicator").val();
        let right_PeriodAndOffset = $("#right_PeriodAndOffset").val();

        // Define Button to display
        let buttonText = left_indicator + " (" + left_PeriodAndOffset + ") " + comparator + " " + right_indicator + " (" + right_PeriodAndOffset + ")";
        let button = '<button id="' + buttonCount + '">' + buttonText + '</button>';

        // Display button inside Div
        $("#displayButtons").append(button);
        buttonCount++;
    } else {
        alert("Limit of 5 reached");
    }
})

$("#removethis").click(function () {
    if (buttonCount > 0) {
        $("#displayButtons > button:last-child").remove();
        buttonCount--;
    }
    else {
        alert("No more buttons to remove.");
    }

})

$('#left_indicator').on('change', function(event) {
    event.preventDefault();
    /* Act on the event */
    if ($(this).val()=='sma') {
      $("#left_period_guider").text('(period,offset)');
    }else if ($(this).val()=='ema') {
      $("#left_period_guider").text('(close,period,offset)');
    }
    
  });
  $('#right_indicator').on('change', function(event) {
    event.preventDefault();
    /* Act on the event */
    if ($(this).val()=='sma') {
      $("#right_period_guider").text('(period,offset)');
    }else if ($(this).val()=='ema') {
      $("#right_period_guider").text('(close,period,offset)');
    }
    
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="left_indicator" id="left_indicator">
      <option>select</option>
      <option value="sma">sma</option>
      <option value="ema">ema</option>
    </select>
    <input type="text" name="left_PeriodAndOffset" id="left_PeriodAndOffset" placeholder="e.g (10.2)">
    <div id="left_period_guider"></div>
    <select name="comparator" id="comparator">
      <option>select</option>
      <option value="=">=</option>
      <option value="<"><</option>
    </select>


    <select name="right_indicator" id="right_indicator">
      <option>select</option>
      <option value="sma">sma</option>
      <option value="ema">ema</option>
    </select>
    <input type="text" name="right_PeriodAndOffset" id="right_PeriodAndOffset" placeholder="e.g (10.2)">
    <div id="right_period_guider"></div>

    <button type="button" id="generateButton" name="generateButton">click to generate button upto 5 with remove button</button>
    <hr>

    This button should generate by clicking above the button with the all field provided values.
    example : sma(10.2) < ema(3.2)
    <button type="button" id="generated1" name="generated1" value="">value will display here</button>
    <button type="button" id="removethis" name="removethis">removethis</button>
    
</div>
<div id="displayButtons" style="display:block;">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...