Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.08.2016, 01:02
Новичок на форуме
Отправить личное сообщение для Frag Посмотреть профиль Найти все сообщения от Frag
 
Регистрация: 30.08.2016
Сообщений: 1

Переход по ссылке при выборе в списке (select)
Здравствуйте .
Есть меню в виде выпадающего списка. Ни как не могу сделать переход по элементу выбранному из списка
код

<script type="text/javascript" src="https://select2.github.io/vendor/js/jquery.min.js"></script>
<script type="text/javascript" src="https://select2.github.io/dist/js/select2.full.js"></script>
<script type="text/javascript" src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://select2.github.io/vendor/js/prettify.min.js"></script>
<script type="text/javascript" src="https://select2.github.io/vendor/js/anchor.min.js"></script>
<link href="https://select2.github.io/css/bootstrap.css" type="text/css" rel="stylesheet" />
<link href="https://select2.github.io/dist/css/select2.min.css" type="text/css" rel="stylesheet" />
<link href="https://select2.github.io/css/font-awesome.css" type="text/css" rel="stylesheet" />
<link href="https://select2.github.io/css/s2-docs.css" type="text/css" rel="stylesheet" >



<script type="text/javascript" src="https://select2.github.io/vendor/js/placeholders.jquery.min.js"></script>
<script type="text/javascript" src="https://select2.github.io/dist/js/i18n/es.js"></script>

<style type="text/css">
.img-flag {
height: 15px;
width: 18px;
}
</style>


<div class="container s2-docs-container">
<div class="row">
<div class="col-md-9" role="main">

<div class="s2-example">
<p>
<select class="js-example-basic-single js-states form-control"></select>
</p>
</div>


<select class="js-source-states">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>


<script type="text/javascript">
var $states = $(".js-source-states");
var statesOptions = $states.html();
$states.remove();

$(".js-states").append(statesOptions);

$("[data-fill-from]").each(function () {
var $this = $(this);

var codeContainer = $this.data("fill-from");
var $container = $(codeContainer);

var code = $.trim($container.html());

$this.text(code);
$this.addClass("prettyprint linenums");
});

prettyPrint();

$.fn.select2.amd.require([
"select2/core",
"select2/utils",
"select2/compat/matcher"
], function (Select2, Utils, oldMatcher) {
var $basicSingle = $(".js-example-basic-single");
var $basicMultiple = $(".js-example-basic-multiple");
var $limitMultiple = $(".js-example-basic-multiple-limit");

var $dataArray = $(".js-example-data-array");
var $dataArraySelected = $(".js-example-data-array-selected");

var data = [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
];

var $ajax = $(".js-example-data-ajax");

var $disabledResults = $(".js-example-disabled-results");

var $tags = $(".js-example-tags");

var $matcherStart = $('.js-example-matcher-start');

var $diacritics = $(".js-example-diacritics");
var $language = $(".js-example-language");

$.fn.select2.defaults.set("width", "100%");

$basicSingle.select2();
$basicMultiple.select2();
$limitMultiple.select2({
maximumSelectionLength: 2
});

function formatState (state) {
if (!state.id) {
return state.text;
}
var $state = $(
'<span>' +
'<img src="vendor/images/flags/' +
state.element.value.toLowerCase() +
'.png" class="img-flag" /> ' +
state.text +
'</span>'
);
return $state;
};

$(".js-example-templating").select2({
templateResult: formatState,
templateSelection: formatState
});

$dataArray.select2({
data: data
});

$dataArraySelected.select2({
data: data
});

function formatRepo (repo) {
if (repo.loading) return repo.text;

var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}

markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";

return markup;
}

function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}

$ajax.select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;

return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});

$(".js-example-disabled").select2();
$(".js-example-disabled-multi").select2();

$(".js-example-responsive").select2({
width: 'resolve' // need to override the changed default
});

$disabledResults.select2();

$(".js-example-programmatic").select2();
$(".js-example-programmatic-multi").select2();

$eventSelect.select2();

$tags.select2({
tags: ['red', 'blue', 'green']
});

$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
});

function matchStart (term, text) {
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
return true;
}

return false;
}

$matcherStart.select2({
matcher: oldMatcher(matchStart)
});

$(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});

$diacritics.select2();

$language.select2({
language: "es"
});

$(".js-example-theme-single").select2({
theme: "classic"
});

$(".js-example-theme-multiple").select2({
theme: "classic"
});

$(".js-example-rtl").select2();
});
</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Действие при одновременном выборе в разных выпадающих списках Oresama Элементы интерфейса 1 28.06.2015 20:22
Привязать Select к ссылке kursof1 Элементы интерфейса 2 18.03.2015 14:08
Изменение selecta при выборе option ainur777 Общие вопросы Javascript 1 10.01.2015 16:23
Элемент select. Выбор элемента в списке nayldock Элементы интерфейса 3 06.01.2015 18:40
Выделение строки <select> при выборе checkbox DarkMaster13 Общие вопросы Javascript 4 14.04.2014 03:30