Блог

Главная - Вопросы по программированию - Есть какой-то способ изменить отображение опций с select на looks like a button?

Есть какой-то способ изменить отображение опций с select на looks like a button?

#javascript #css #knockout.js

#javascript #css #knockout.js

Вопрос:

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

Это должен быть select (или что-то в этом роде, с элементами nest), потому что так работает эта платформа, я не могу это изменить. Я уже пробовал использовать две кнопки, вообще никакой работы. Вот код, который я использую для выбора:

 <select class="form-control cc-skuDropdown"
    data-bind="validatableTarget: selectedOption, 
    validationOptions: {decorateElement: false, decorateElementOnModified:  false}, options: optionValues, 
    optionsText: 'key', attr: {id: 'CC-prodDetails-'   $data.optionId}, optionsCaption: $data.optionCaption, 
    value: $data.selectedOption, disable: $parent.disableOptions() || $data.disable">
</select>

Заранее спасибо.

Комментарии:

1. MDN: Введение в CSS

2. Привет, Матеус, я только что создал аналогичную функцию для экранов размером с планшет, чтобы заменить выпадающие списки модалами, содержащими кнопки (в конечном итоге делая то же самое). Это возможно, просто удалив select и вместо использования options используя элементы button. Я посмотрю, смогу ли я предоставить вам какой-нибудь пример кода.

3. Вот что я закодировал. Кнопка появляется и отлично работает с радио, но не работает должным образом с серверной частью, из-за чего система пропускает «options» codepen.io/anon/pen/WmWWMa

4. Если вы ищете только HTML, CSS и JavaScript, вы могли бы сделать что-то вроде этого: jsfiddle.net/doLjx320 Пожалуйста, дайте мне знать, если это то, что вы ищете, чтобы я мог уточнить ответ.

5. Обновленная ссылка с пояснением: jsfiddle.net/fhpcryv6/1