Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как запушить значения в select? (https://javascript.ru/forum/dom-window/69010-kak-zapushit-znacheniya-v-select.html)

INSIDER73 24.05.2017 10:47

Как запушить значения в select?
 
В {{::min}} и {{::max}} передается минимальное и максимальное значение,я хочу передать в селект значение от min до max,и построить его чтобы было примерно так,если min =1000 а max=5000 ,то строится селект с выборами 1000,1001,1002....5000,но не получается,что делаю не так?
<div id="q1">{{::min}}</div>
<div id="q2">{{::max}}</div>
<select id="minim" ></select>


var min = $("#q1").text();
var max = $("#q2").text();
min1 = parseInt(min, 10);
max1 = parseInt(max, 10);
for (var i = min1; i < max1; i++)
{ 
    $("#minim").push(i); 
}

j0hnik 24.05.2017 11:16

тут нужен не push
$("#minim").push(i); 
}

a
$("#minim").append('<option value="'+i+'">'+i+'</option>')

laimas 24.05.2017 11:19

Список не имеет метода .push(), это не массив. Добавлять в него нужно опции (<option></option>)

laimas 24.05.2017 11:20

Цитата:

Сообщение от j0hnik
$('<option value="i">i</option>')

Это работать не будет.

j0hnik 24.05.2017 11:26

Цитата:

Сообщение от laimas (Сообщение 453262)
Это работать не будет.

Поправил кавычки

laimas 24.05.2017 11:32

Цитата:

Сообщение от j0hnik
Поправил кавычки

И что? Все равно не будет. :)

$("#minim").append('<option value="'+i+'">'+i+'</option>')

ksa 24.05.2017 11:34

Или нативными методами...

<SELECT ID="oSelect">
  <OPTION VALUE="1">One</OPTION>
</SELECT>

<SCRIPT>
var oOption = document.createElement("OPTION");
document.getElementById('oSelect').options.add(oOption);
oOption.innerHTML = "Two";
oOption.Value = "2";
</SCRIPT>

j0hnik 24.05.2017 11:55

Цитата:

Сообщение от laimas (Сообщение 453268)
И что? Все равно не будет. :)

$("#minim").append('<option value="'+i+'">'+i+'</option>')

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
  <select id="minim"></select>
<script>
for (var i = 0; i < 20; i++) {
$("#minim").append('<option value="'+i+'">'+i+'</option>')
}
</script>
</body>
</html>

j0hnik 24.05.2017 13:01

Цитата:

Сообщение от INSIDER73 (Сообщение 453254)
В {{::min}} и {{::max}} передается минимальное и максимальное значение,я хочу передать в селект значение от min до max,и построить его чтобы было примерно так,если min =1000 а max=5000 ,то строится селект с выборами 1000,1001,1002....5000,но не получается,что делаю не так?

Вообще, не советую пихать в селект 4000 опшенов,
лучше сделать так
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="shir" value="1000"><br>
<input type="range" min="1000" max="5000" step="1" value="1000" id="shirR">
<script>
		$('#shirR').on('input', function() {
			var rng = $('#shirR').val();
			$('#shir').val(rng);
		});
</script>
</body>
</html>

ksa 24.05.2017 13:53

Цитата:

Сообщение от j0hnik (Сообщение 453275)
$('#shirR').on('input', function() {
	var rng = $('#shirR').val();
	$('#shir').val(rng);
});

Заменить на

$('#shirR').on('input', function() {
	$('#shir').val(this.value);
});

laimas 24.05.2017 14:11

Цитата:

Сообщение от ksa
Заменить на

<input type="text" id="shir" value="1000"> - выбросить "на", хватит и output. :) input type="range" такое же равноценное поле формы, которое с успехом может обмениваться выбором пользователя.

INSIDER73 24.05.2017 15:23

но мне к сожалению нужно сделать именно выпадающим списком,а вот такой вопрос,если у меня много селектов и у каждого свой min и max будт то как сделать?ведь скрипт сработает только для первого id ,а если задать классами то у всех будет одинаково все

рони 24.05.2017 15:50

INSIDER73,
Цитата:

Сообщение от INSIDER73
если задать классами то у всех будет одинаково все

не будет.
<div class="item">
<div class="q1">{{::min}}</div>
<div class="q2">{{::max}}</div>
<select class="minim" ></select>
</div>

$(function() {
    $(".item").each(function(indx, el){
          //$(".minim", el) ...
          });
});

j0hnik 24.05.2017 16:08

Цитата:

Сообщение от ksa (Сообщение 453278)
Заменить на

$('#shirR').on('input', function() {
	$('#shir').val(this.value);
});

Хорошее замечание, одобряю!

INSIDER73 24.05.2017 16:12

Цитата:

Сообщение от рони (Сообщение 453284)
INSIDER73,

не будет.
<div class="item">
<div class="q1">{{::min}}</div>
<div class="q2">{{::max}}</div>
<select class="minim" ></select>
</div>

$(function() {
    $(".item").each(function(indx, el){
          //$(".minim", el) ...
          });
});

Не совсем понял как скрипт будет выглядеть?
Так?
$(function() {
    $(".item").each(function(indx, el){
               var min = $(".q1").text();
                var max = $(".q2").text();
                min1 = parseInt(min, 10);
                max1 = parseInt(max, 10);
                for (var i = min1; i < max1; i += 10000)

                { $(".minim").append($('<option value="' + i + '">' + i + '</option>')) }
          });
});

j0hnik 24.05.2017 16:14

Цитата:

Сообщение от laimas (Сообщение 453279)
<input type="text" id="shir" value="1000"> - выбросить "на", хватит и output. :) input type="range" такое же равноценное поле формы, которое с успехом может обмениваться выбором пользователя.

с таким диапазоном я бы оставил оба. попробуй рейнджом попади в 3333 например!

laimas 24.05.2017 16:28

Цитата:

Сообщение от j0hnik
попробуй рейнджом попади в 3333 например

Для этого существует параметр step, значением которого можно управлять. По данному вопросу (управление шагом ползунка) и на форуме предостаточно написано.

рони 24.05.2017 16:32

Цитата:

Сообщение от INSIDER73
как скрипт будет выглядеть?
Так?

да, только дополните селекторы согласно примеру.

j0hnik 24.05.2017 16:32

Цитата:

Сообщение от INSIDER73 (Сообщение 453291)
Не совсем понял как скрипт будет выглядеть?
Так?
$(function() {
    $(".item").each(function(indx, el){
               var min = $(".q1").text();
                var max = $(".q2").text();
                min1 = parseInt(min, 10);
                max1 = parseInt(max, 10);
                for (var i = min1; i < max1; i += 10000)

                { $(".minim").append($('<option value="' + i + '">' + i + '</option>')) }
          });
});

$(function() {
    $(".item").each(function(indx, el){
               var min = $(this).children(".q1").text();
                var max = $(this).children(".q2").text();
                min1 = parseInt(min, 10);
                max1 = parseInt(max, 10);
                for (var i = min1; i < max1; i += 10000)

                { $(this).children(".minim").append($('<option value="' + i + '">' + i + '</option>')) }
          });
});

примерно так.

j0hnik 24.05.2017 16:35

Цитата:

Сообщение от laimas (Сообщение 453294)
Для этого существует параметр step, значением которого можно управлять. По данному вопросу (управление шагом ползунка) и на форуме предостаточно написано.

в данном случае step="1".

laimas 24.05.2017 16:48

Цитата:

Сообщение от j0hnik
в данном случае step="1"

Ну это уже ваши проблемы, а не JS и HTML )

j0hnik 24.05.2017 16:53

Цитата:

Сообщение от laimas (Сообщение 453298)
Ну это уже ваши проблемы, а не JS и HTML )

Дорогой друг, к счастью не мои
Цитирую автора темы: "если min =1000 а max=5000 ,то строится селект с выборами 1000,1001,1002....5000"

laimas 24.05.2017 17:15

Цитата:

Сообщение от j0hnik
Дорогой друг, к счастью не мои

Ваши. ) Вы торопитесь, чтобы не опоздать на автобус. Означает ли это, что весь путь до непосредственно кондуктора нужно бежать? Нет, до дверей бегом, около них снижаем скорость, входим в автобус шагом.

Вот так и с органами управления можно поступать, к тому же элементом range можно управлять и клавиатурой, к примеру ползунком это грубо, с большим шагом, клавиатурой точно.

Но в общем-то данный вопрос возник не поэтому, а потому, что в вашем коде второе поле формы как прицеп только для отображения. Если же это связанные элементы (либо ползунок, либо ввод), то значит и скрипт должен быть соответствующий - изменения в поле ввода должны отражаться и на слайдере.


Часовой пояс GMT +3, время: 01:08.