Как переделать select option в input?

Question

[viktorulyushev]

У меня есть выпадающий список

<select class="field" name="category">
                        	<option>Клиника</option>
                        	<option value="2">Частный врач</option>
                        </select>

Можно ли поменять как нибудь визуальное отображение чтобы выглядело как радиокнопки?Не хочется менять из за этого весь функционал

Answer 1

[justdealman]

А весь функционал переделывать и не надо — создайте новый элемент управления, передавайте изменения из него в селект, а сам селект скройте.

https://jsfiddle.net/1aj70xu7/

Comments

[viktorulyushev]

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

Answer 2

[viktorulyushev]

<div class="modal fade" id="modalRegister" tabindex="-1" role="dialog" aria-labelledby="modalAnswer">
    <div class="modal-dialog modal-dialog__bordered" role="document">
        <div class="modal-content modal-content">
            <div class="modal-body">
                <button type="button" class="modal-close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">×</span></button>
                <form class="form jq-register-form" method="post" action="?send=Y">
                    <h3 class="form_heading heading">Регистрация</h3>
                    <div class="form_row">
                        <label class="form_label">Категория:</label>
                        <select class="field" name="category">
                        	<option>Клиника</option>
                        	<option value="2">Частный врач</option>
                        </select>
                    </div>
                    <div class="jq-content">
	                    <div class="form_row">
							<input class="field" type="text" placeholder="Название клиники" name="name" required>
	                    </div>
						<div class="form_row">

	                        <textarea class="field field__textarea" placeholder="Описание" name="description"></textarea>
	                    </div>
	                    <div class="form_row">
	                        <input class="field" type="email" placeholder="Электронная почта" name="email" required>
	                    </div>
	                    <div class="form_row">

							<input class="field" placeholder="Регион:" type="text" name="region">
	                    </div>
	                    <div class="form_row">
	                        <div id="reCaptcha1"></div>
	                    </div>
                   </div>
                    <button class="main-btn" type="submit" name="register_submit" value="Y"><span class="icon icon-forum"></span> Отправить</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
	$('.jq-register-form').on('change', '[name="category"]', function(){
		if ($(this).val() == 2) {
			$('.jq-register-form .jq-content').html(
				'<div class="form_row">'+
                    '<label class="form_label">Ф.И.О.: <span style="color: red;">*</span></label>' +
                    '<input class="field" type="text" name="name" required>' +
                '</div>' +
				'<div class="form_row">'+
                    '<label class="form_label">Профессия: <span style="color: red;">*</span></label>' +
                    '<input class="field" type="text" name="job" required>' +
                '</div>' +
				'<div class="form_row">' +
                    '<label class="form_label">Опыт: <span style="color: red;">*</span></label>' +
                    '<textarea class="field field__textarea" name="exp" require></textarea>' +
                '</div>' +
				'<div class="form_row">' +
                    '<label class="form_label">Специализация: <span style="color: red;">*</span></label>' +
                    '<textarea class="field field__textarea" name="spec" require></textarea>' +
                '</div>' +
				'<div class="form_row">' +
                    '<label class="form_label">Адрес клиники: <span style="color: red;">*</span></label>' +
                    '<textarea class="field field__textarea" name="address" require></textarea>' +
                '</div>' +
                '<div class="form_row">' +
                    '<label class="form_label">Ваш e-mail: <span style="color: red;">*</span></label>' +
                    '<input class="field" type="email" name="email" required>' +
                '</div>' +
                '<div class="form_row">'+
                    '<label class="form_label">Телефон (для связи администрации сайта с врачом, не публикуется на сайте): </label>' +
                    '<input class="field" type="text" name="phone">' +
                '</div>' +
                '<div class="form_row">' +
                    '<label class="form_label">Регион:</label>' +
                    '<input class="field" type="text" name="region">' +
                '</div>' +
                '<div class="form_row">' +
                    '<label class="form_label">Дополнительная информация: </label>' +
                    '<textarea class="field field__textarea" name="opt"></textarea>' +
                '</div>'
			);
		}
		else {
			$('.jq-register-form .jq-content').html(
				'<div class="form_row">'+
                    '<label class="form_label">Название: <span style="color: red;">*</span></label>' +
                    '<input class="field" type="text" name="name" required>' +
                '</div>' +
				'<div class="form_row">' +
                    '<label class="form_label">Описание: <span style="color: red;">*</span></label>' +
                    '<textarea class="field field__textarea" name="description"></textarea>' +
                '</div>' +
                '<div class="form_row">' +
                    '<label class="form_label">Ваш e-mail: <span style="color: red;">*</span></label>' +
                    '<input class="field" type="email" name="email" required>' +
                '</div>' +
                '<div class="form_row">' +
                    '<label class="form_label">Регион:</label>' +
                    '<input class="field" type="text" name="region">' +
                '</div>'
			);
		}
	});
</script>