Форум

Shur · #1 (**permalink**) 24.05.2016, 04:26

Есть такой иерархический DropDown.

<select id="estimateA">
    <option value="1">Test</option>
    <option value="2">\u00a0_Test1</option>
    <option value="3">\u00a0\u00a0_Test1_1</option>
    <option value="4">\u00a0_Test2</option>
    <option value="5">\u00a0\u00a0_Test2_1</option>
    <option value="6">\u00a0\u00a0_Test2_2</option>
</select>

Подскажите, как сделать так чтобы на выбранном элементе не было лишних пробелов?

Сейчас делаю следующим образом:

$('#estimateA').change(function () { 
    //возвращаю элементам неразрывные пробелы
    $("#estimateA option").each( 
    function paintPackageTable() {
        var $cell = $(this);
        $cell.text($cell.text().replace(/  /g, '\u00a0\u00a0'));
        }
    );
    //возвращаю элементам неразрывные пробелы
    var $cell1 = $("#estimateA option:selected");
    $cell.text($cell1.text().replace(/\u00a0\u00a0/g, '  '));
});

Что можно сделать, чтобы в выпадающем списке была видна иерархия, а при выборе и отображении в "свернутом" состоянии - не было лишних пробелов?

Dilettante_Pro · #2 (**permalink**) 24.05.2016, 07:49

Shur,
В value писать не 1,2,....
А текст без пробелов. И пользоваться им при выборе.
Или добавить для этого дополнительное свойство data-text

рони · #3 (**permalink**) 24.05.2016, 16:59

Shur,

Сообщение от Shur

Что можно сделать, чтобы в выпадающем списке была видна иерархия,

видна но кроме выбранного пункта ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
 $(function() {
    $("#estimateA").on("change", function(event) {
        $("#estimateA option").each(function() {
            var $cell = $(this);
            $cell.text($cell.text().replace(/\u200B/g, "\u2007"))
        });
        var $cell = $("#estimateA option:selected");
        $cell.text($cell.text().replace(/\u2007/g, "\u200b"))
    })
});
  </script>
</head>

<body>

<select id="estimateA">
    <option value="1">Test</option>
    <option value="2">&#8199;_Test1</option>
    <option value="3">&#8199;&#8199;_Test1_1</option>
    <option value="4">&#8199;_Test2</option>
    <option value="5">&#8199;&#8199;_Test2_1</option>
    <option value="6">&#8199;&#8199;_Test2_2</option>
</select>
</body>
</html>

Shur · #4 (**permalink**) 25.05.2016, 04:30

Сообщение от Dilettante_Pro

Или добавить для этого дополнительное свойство data-text

можно небольшой пример? С "data-text"?

Shur · #5 (**permalink**) 25.05.2016, 04:39

Сообщение от рони

видна но кроме выбранного пункта ...

Угу, так уже догадался. Временное решение. Думал еще возвращать пробелы по клику на select, но что-то не получилось..

Dilettante_Pro · #6 (**permalink**) 25.05.2016, 12:19

Сообщение от Shur

можно небольшой пример? С "data-text"?

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

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script type="text/javascript">
     $(function () {
         $("#estimateA").on("change", function (event) {
             alert("Выбрано:" + $("#estimateA option:selected").attr('data-text'));
         });
     })
   </script>
</head>
 <body> 
   <select id="estimateA">
    <option value="1" data-text="Test">Test</option>
    <option value="2" data-text="_Test1"> _Test1</option>
    <option value="3" data-text="_Test1_1">  _Test1_1</option>
    <option value="4" data-text="_Test2"> _Test2</option>
    <option value="5" data-text="_Test2_1">  _Test2_1</option>
    <option value="6" data-text="_Test2_2">  _Test2_2</option>
   </select>
 </body>
</html>

При этом заметил, что в Хроме и Опере выбранное значение отображается без пробелов без каких-либо дополнительных манипуляций.
В ИЕ и ФФ - с пробелами

Форум

Справочник

Discord чат

Курсы javascript