Форум

Alehana · #1 (**permalink**) 25.01.2019, 08:07

Скачал отсюда плагин
https://www.jqueryscript.net/form/Dy...st-Select.html

Скопировал папки dist и src в ту папку, где находится шаблон
Далше все делаю по инструкции. но как на картинке на сайте не получается
https://yadi.sk/i/Ts8_8v5ZAPzLQw

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="padding: 1em;">
<link rel="stylesheet" href="dist/fastselect.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/fastselect.js"></script>
<script>$('.demo').fastselect();</script>
<script>$('.demo').fastselect();</script>
</body>
<input
    type="text"
    multiple
    class="demo"
    value="Algeria,Angola"
    data-initial-value='[{"text": "Algeria", "value" : "Algeria"}, {"text": "Angola", "value" : "Angola"}]'
    data-url="data.json"
    data-load-once="true"
    name="language">

<input type="text" multiple class="demo" data-url="data.json" name="language">

<select class="multipleSelect" multiple name="language">
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
</select>
</html>

Что я делаю не так.

рони · #2 (**permalink**) 25.01.2019, 09:18

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

Что я делаю не так.

ещё нет элементов которые вы используите.
обернуть строку 11 в ready, 12 убрать.

Alehana · #3 (**permalink**) 25.01.2019, 09:28

Не работает

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="padding: 1em;">
<link rel="stylesheet" href="dist/fastselect.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/fastselect.js"></script>
<ready>$('.demo').fastselect();</ready>
</body>
<input
    type="text"
    multiple
    class="demo"
    value="Algeria,Angola"
    data-initial-value='[{"text": "Algeria", "value" : "Algeria"}, {"text": "Angola", "value" : "Angola"}]'
    data-url="data.json"
    data-load-once="true"
    name="language">

<input type="text" multiple class="demo" data-url="data.json" name="language">

<select class="multipleSelect" multiple name="language">
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
</select>
</html>

Итог:
https://yadi.sk/i/sjaHDTVMl0Tc2Q

рони · #4 (**permalink**) 25.01.2019, 10:44

Alehana,

<script>
$(function() {
$('.demo').fastselect();
});
  </script>

Alehana · #5 (**permalink**) 25.01.2019, 11:00

Не помогло

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="padding: 1em;">
<link rel="stylesheet" href="dist/fastselect.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/fastselect.js"></script>
<script>
    $(function() {
        $('.demo').fastselect();
    });
</script>
</body>
<input
        type="text"
        multiple
        class="demo"
        value="Algeria,Angola"
        data-initial-value='[{"text": "Algeria", "value" : "Algeria"}, {"text": "Angola", "value" : "Angola"}]'
        data-url="data.json"
        data-load-once="true"
        name="language">

<input type="text" multiple class="demo" data-url="data.json" name="language">

<select class="multipleSelect" multiple name="language">
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
</select>
</html>

https://yadi.sk/i/3qPiGgaxifLuFw

рони · #6 (**permalink**) 25.01.2019, 12:03

Alehana,

файл data.json добавьте самостоятельно.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="padding: 1em;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://dbrekalo.github.io/fastselect/dist/fastselect.min.css">
<script src="https://dbrekalo.github.io/fastselect/dist/fastselect.standalone.js"></script>
        <script>
    $(function() {
        $('.demo, .multipleSelect').fastselect();
    });
</script>
</body>
<input
        type="text"
        multiple
        class="demo"
        value="Algeria,Angola"
        data-initial-value='[{"text": "Algeria", "value" : "Algeria"}, {"text": "Angola", "value" : "Angola"}]'
        data-url="data.json"
        data-load-once="true"
        name="language">

<input type="text" multiple class="demo" data-url="data.json" name="language">

<select class="multipleSelect" multiple name="language">
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
</select>
</html>

Alehana · #7 (**permalink**) 25.01.2019, 12:25

Так то оно, конкчно работает, вопрос только - как при таком раскладе отредактировать CSS или Javascript

рони · #8 (**permalink**) 25.01.2019, 12:29

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

как при таком раскладе отредактировать CSS или Javascript

??? скачали файлы к себе, отредактировали, указали путь к новым файлам.

Alehana · #9 (**permalink**) 25.01.2019, 12:31

Не згаете. где можно скачать все вышеописанные файлы ?

рони · #10 (**permalink**) 25.01.2019, 12:35

Alehana,
скопируйте ссылки из строк 9 и 10 и качайте.
или всё целиком https://github.com/dbrekalo/fastsele...ive/master.zip

Форум

Справочник

Discord чат

Курсы javascript