Короткий ответ: вам нужно выполнить обратный вызов следующим образом:
function callback(response) {
// Here you can do what ever you want with the response object.
console.log(response);
}
$.ajax({
url: "...",
success: callback
});
Я боюсь, что это невозможно с помощью простого CSS, и невозможно будет полностью совместиться с несколькими браузерами.
Однако, используя плагин jQuery, вы можете создать раскрывающийся список:
Этот плагин скрывает элемент select
и создает элементы span
и т. д. летать, чтобы отобразить собственный стиль выпадающего списка. Я уверен, что вы сможете изменить стили на пролетах и т. Д., Чтобы центрировать выравнивание элементов.
Я всегда получал следующий хак, чтобы заставить его работать только с css.
padding-left: 45%;
font-size: 50px;
padding центрирует текст и может быть изменен для размера текста:)
Это, очевидно, не на 100% правильно с точки зрения проверки, я думаю, но он выполняет задание:)
, если параметры статичны, вы можете прослушать событие изменения в вашем поле выбора и добавить дополнение для каждого отдельного элемента
$('#id').change(function() {
var select = $('#id');
var val = $(this).val();
switch(val) {
case 'ValOne':
select.css('padding-left', '30px');
break;
case 'ValTwoLonger':
select.css('padding-left', '20px');
break;
default:
return;
}
});
Вы должны поместить правило CSS в класс select.
Использовать CSS text-indent
Пример
<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>
Код CSS
select { text-indent: 5px; }
Это для выравнивания справа. Попробуйте:
select{
text-align-last:right;
padding-right: 29px;
direction: rtl;
}
поддержку браузера для атрибута text-align-last
можно найти здесь: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp Похоже, что только Safari все еще не поддерживает его.
Альтернативное «поддельное» решение, если у вас есть список с параметрами, подобными длине текста (например, для выбора страницы):
padding-left: calc(50% - 1em);
Это работает в Chrome, Firefox и Edge. Хитрость здесь заключается в том, чтобы вывести текст слева в центр, затем вычесть половину длины в px, em или вне текста опции.
Лучшее решение IMO (в 2017 году) по-прежнему заменяет выбор через JS и создает собственный поддельный select-box с помощью div или любого другого и связывает события клика на нем для поддержки кросс-браузера.
это сработало для меня:
text-align: center;
text-align-last: center;
Вы не можете очень сильно настроить <select>
или <option>
. Единственный способ (кросс-браузер) - вручную создать раскрывающийся список с div и css / js для создания чего-то подобного.
Это может быть полезно для очень конкретных случаев использования. Это утомительно и уродливо, но работает кросс-браузер: просто используйте жестко закодированные пробелы, чтобы каждая запись имела такую же длину.
<select class="form-control" id="sel1">
<option>-10</option>
<option> -9</option>
<option> -8</option>
<option> -7</option>
<option> -6</option>
<option> -5</option>
<option> -4</option>
<option> -3</option>
<option> -2</option>
<option> -1</option>
<option> 0</option>
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
<option> 6</option>
<option> 7</option>
<option> 8</option>
<option> 9</option>
<option> 10</option>
</select>
, просто используя это:
select {
text-align-last: center;
padding-right: 29px;
}
попробуйте следующее:
select {
padding-left: 50% !important;
width: 100%;
}
select {
text-align: center;
text-align-last: center;
}
option {
text-align: left;
}
<select>
<option value="">(please select a state)</option>
<option class="lt" value="--">none</option>
<option class="lt" value="AL">Alabama</option>
<option class="lt" value="AK">Alaska</option>
<option class="lt" value="AZ">Arizona</option>
<option class="lt" value="AR">Arkansas</option>
<option class="lt" value="CA">California</option>
<option class="lt" value="CO">Colorado</option>
</select>
Есть частичное решение для Chrome:
select { width: 400px; text-align-last:center; }
Он центрирует выбранный параметр, но не параметры внутри раскрывающегося списка.
Если вы не нашли решения, вы можете использовать этот трюк на angularjs или использовать js для сопоставления выбранного значения с текстом в div, это решение является полным css-совместимым по угловому, но ему нужно сопоставление между select и div:
var myApp = angular.module('myApp', []);
myApp.controller('selectCtrl', ['$scope',
function($scope) {
$scope.value = '';
}
]);
.ghostSelect {
opacity: 0.1;
/* Should be 0 to avoid the select visibility but not visibility:hidden*/
display: block;
width: 200px;
position: absolute;
}
.select {
border: 1px solid black;
height: 20px;
width: 200px;
text-align: center;
border-radius: 5px;
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-guide-concepts-1-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-app ng-controller="selectCtrl">
<div class=select>
<select ng-model="value" class="ghostSelect">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
<div>{{value}}
</div>
</div>
</div>
</body>
Надеюсь, это может быть полезно для кого-то, так как мне понадобился один день, чтобы найти это решение по телефонной запинке.
Эта функция JS должна работать для вас
function getTextWidth(txt) {
var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
var elmWidth = $elm.width();
$elm.remove();
return elmWidth;
}
function centerSelect($elm) {
var optionWidth = getTextWidth($elm.children(":selected").html())
var emptySpace = $elm.width()- optionWidth;
$elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start
$('.centerSelect').each(function(){
centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
centerSelect($(this));
});
Полный коддеп здесь: http://codepen.io/anon/pen/NxyovL
Не совсем центрировать, но используя пример выше, вы можете сделать левое поле в поле выбора.
<style>.UName { text-indent: 5px; }</style><br>
<select name="UserName" id="UserName" size="1">
<option class="UName" selected value="select">Select User</option>
<option class="UName" value="User1">User 1 Name</option>
<option class="UName" value="User2">User 2 Name </option>
<option class="UName" value="User3">User 3 Name</option>
</select>
Вы можете добавить этот стиль в тег dropdownlist (text-align: center) Как показано ниже:
<asp:DropDownList ID="DDL" runat="server" CssClass="form-control btn-default" Style="font-size: 1.25vw; font-weight: bolder; font-family: Sakkal Majalla; text-align: center; text-align-last:center; color: #1658a4; height: 2.5vw; width: 18vw" TabIndex="2" AutoPostBack="true">
Пока вы не можете центрировать текст опции в пределах выбора, вы можете поместить абсолютно позиционированный div над вершиной выбора в тот же эффект:
#centered
{
position: absolute;
top: 10px;
left: 10px;
width: 818px;
height: 37px;
text-align: center;
font: bold 24pt calibri;
background-color: white;
z-index: 100;
}
#selectToCenter
{
position: absolute;
top: 10px;
left: 10px;
width: 840px;
height: 40px;
font: bold 24pt calibri;
}
$('#selectToCenter').on('change', function () {
$('#centered').text($(this).find('option:selected').text());
});
<select id="selectToCenter"></select>
<div id="centered"></div>
Убедитесь, что оба div и select имеют фиксированные позиции в документе.