Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как корректно заменить async: false на async: true

Проблема в том, что данный код устарел, блокирует браузер на время выполнения скрипта и выдает warning:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

я понимаю, что нужно использовать колбэки, но у меня не получается корректно внести изменения, все по цепочки начинает отваливаться(

Что за tooltip? config.tooltip в любом случае (async: false или async: true) равен true, но при async: true сразу ошибка:

Uncaught TypeError: Cannot read property 'tooltip' of null

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var JCART = (function() {
 
        // This script sends Ajax requests to config-loader.php and relay.php using the path below
        // We assume these files are in the 'jcart' directory, one level above this script
        // Edit as needed if using a different directory structure
        var path = 'jcart',
            container = $('#jcart'),
            token = $('[name=jcartToken]').val(),
            tip = $('#jcart-tooltip');
 
        var config = (function() {
            var config = null;
            $.ajax({
                url: path + '/config-loader.php',
                data: {
                    "ajax": "true"
                },
                dataType: 'json',
                async: false,
                success: function(response) {
                    config = response;
                },
                error: function() {
                    alert('Ajax error: Edit the path in jcart.js to fix.');
                }
            });
            return config;
        ;
        }());
 
        var setup = (function() {
            if(config.tooltip === true) {
 
                tip.text(config.text.itemAdded);
    
                // Tooltip is added to the DOM on mouseenter, but displayed only after a successful Ajax request
                $('.jcart [type=submit]').mouseenter(
                    function(e) {
                        var x = e.pageY + 25,
                            y = e.pageX + -10;
                        $('body').append(tip);
                        tip.css({top: y + 'px', left: x + 'px'});
                    }
                )
                .mousemove(
                    function(e) {
                        var y = e.pageY + 25,
                        x = e.pageX + -10;
                        tip.css({top: y + 'px', left: x + 'px'});
                    }
                )
                .mouseleave(
                    function() {
                        tip.hide();
                    }
                );
            }
Ответ: Убрал все лишнее, ошибок нет, товар в корзину добавляется. Но ajax не работает, страница перезагружается. Вот весь код без лишней лабуды:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// jCart v1.3
// [url]http://conceptlogic.com/jcart/[/url]
 
$(function() {
    var JCART = (function() {
        var path = 'jcart',
            container = $('#jcart'),
            token = $('[name=jcartToken]').val(),
            tip = $('#jcart-tooltip');
 
        var config = (function() {
            var config = null;
            $.ajax({
                url: path + '/config-loader.php',
                data: {
                    "ajax": "true"
                },
                dataType: 'json',
                success: function(response) {
                    config = response;
                    var setup = (function() {
                    // Remove the update and empty buttons since they're only used when javascript is disabled
                    $('#jcart-buttons').remove();
        
                    // Default settings for Ajax requests
                    $.ajaxSetup({
                        type: 'POST',
                        url: path + '/relay.php',
                        success: function(response) {
                            // Refresh the cart display after a successful Ajax request
                            container.html(response);
                            $('#jcart-buttons').remove();
                        },
                        // See: [url]http://www.maheshchari.com/jquery-ajax-error-handling/[/url]
                        error: function(x, e) {
                            var s = x.status, 
                                m = 'Ajax error: ' ; 
                            if (s === 0) {
                                m += 'Check your network connection.';
                            }
                            if (s === 404 || s === 500) {
                                m += s;
                            }
                            if (e === 'parsererror' || e === 'timeout') {
                                m += e;
                            }
                            alert(m);
                        }
                    });
                }());
                },
                error: function() {
                    alert('Ajax error: Edit the path in jcart.js to fix.');
                }
            });
        ;
        }());
 
        
        // If this is not the checkout the hidden input doesn't exist and no value is set
        var isCheckout = $('#jcart-is-checkout').val();
 
        function add(form) {
            // Input values for use in Ajax post
            var itemQty = form.find('[name=' + config.item.qty + ']'),
                itemAdd = form.find('[name=' + config.item.add + ']');
            // Add the item and refresh cart display
            $.ajax({
                data: form.serialize() + '&' + config.item.add + '=' + itemAdd.val(),
                success: function(response) {
                    // Momentarily display tooltip over the add-to-cart button
                    if (itemQty.val() > 0 && tip.css('display') === 'none') {
                        tip.fadeIn('100').delay('400').fadeOut('100');
                    }
                    container.html(response);
                    $('#jcart-buttons').remove();
                }
            });
        }
        // Add an item to the cart
        $('.jcart').submit(function(e) {
            add($(this));       
            e.preventDefault();
        });
    }()); // End JCART namespace
}); // End the document ready function
Вопрос: Не могу добавить option в select

Собственно index.html
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>TEST</title>
		<script src='./jquery.js' type='text/javascript'></script>
		<script src='./my.js' type='text/javascript'></script>
</head>
<body>
    <select id='UserStatus' name='UserStatus'>
		<option value='active'>активна</option>
		<option value='locked'>блокирована</option>
	</select>
</body>
</html>

А вот my.js:
$(document).ready(
 function() {
  $('select[@name=UserStatus] option').remove();
  $('select[@name=UserStatus] option').append('<option>новый</option>');
  }
 );


При загрузке страницы получаю пустой select, а если убрать
$('select[@name=UserStatus] option').remove();


получаю:
<select id="UserStatus" name="UserStatus">
 <option value="active">
 активна
  <option>новый</option>
 </option>
 <option value="locked">
 блокирована
  <option>новый</option>
 </option>
</select>


Что не так?
Ответ: Дабы не создавать новую тему. А, может и не в ту ветку пишу. Извиняюсь!
Ув. Знатоки подскажите как добавлять в select новый пункт через php?

К примеру нужно добавить в селектор новый пункт. Пишем в поле input Слово которое должно быть в select. Жмем кнопку добавить и слово добавляется в select только без перезагрузки страницы. И еще важно чтоб при каждом добавлении слова в value каждого нового option-a добавлялась цифра по нумерации тобишь если <option>Слово 1</opton> то его value будет 1.

Заранее спасибо)
Вопрос: Async в ajax

Добрый день ув. формучане.
Возникла проблема след. рода, функция:
function (тут параметры){
аякс (отрабатывает при определенных условиях)

тут еще код (если отработал ajax учитывает и результат его работы)
}

Проблема: код срабатывает раньше, чем ajax закончит свою работу, а в дальнейшем мне нужно учитывать результат работы аякса.
Есть чудо свойство async: false, но выставив его я получаю варнинг.
Оказывается его собираются убрать в последующих обновлениях(((

Есть какие-то альтернативы async false?
PS: структуру приложения (как пишет гугл) менять не сильно хочется (переделать код предыдущих разработчиков, которых было не мало - не очень хочется, учитывая то, что там ~ 1.5к строчек кода)
PPS: просто забить (как советовали на других форумах) - не вариант.
Ответ: Чтоб сильно не менять структуру, мб добавить callback?
function fn(param) {
	if (param) {
  	ajax(function(response) {
    	alert(response);
    });
  }
  else {
  	alert('without ajax');
  }
}


function ajax(cb) {
	setTimeout(function() {
    cb('WITH AJAX');
  }, 2000);
}


fn();
fn(true);
Вопрос: перемещение option (multiselect)

Добрый день. Появилась задача переносить option из одного select'a в другой. Задача решилась, однако возникли проблемы: не переносит все элементы (еслы было выбрано более одного). JQuery юзать крайне нежелательно, в этом то и кроется основная проблема. Может кто нибудь помочь с данной проблемой? Код ниже

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>User Settings</title>
<link REL="stylesheet" HREF="/sbx-pub/menu.css" TYPE="text/css">
<script type="text/javascript" src="/sbx-pub/cookies.js"></script>
<script language="javascript"><!--
function moveOption(s1, s2 ,opt){
	s1 = document.getElementById(s1);
	s2 = document.getElementById(s2);
	opt = opt || s1.options[s1.options.selectedIndex];
	alert(s1.options.selectedIndex + "|" + opt.length);
	if(opt.value){
		s2.appendChild(s1.removeChild(opt));
	}
}
function
loadColumnList()
{
	var upick, ctl;
	ctl = document.myForm.sel1;
	if(getCookie('res_cols')){
		upick = getCookie('res_cols').split(';');
	}
	else
		upick = ['ENVIRO_NAME','SCC_RELEASE','VER_GCMN','VER_GLAB'];
	for(i=0; i<ctl.length; i++){
		/* upick.indexOf() is missing on IE8 */
		for(j=0; j<upick.length; j++){
			if(ctl.options[i].value == upick[j]){
				obj=ctl.options[i];
				moveOption('sel1', 'columns', obj);
				break;
			}
		}
	}
}

function
saveColumnList()
{
	var upick, ctl;
 	upick = [];
	ctl = document.myForm.columns;
 	for (i=0; i<ctl.length; i++)
		if(ctl.options[i] && ctl.options[i].value.length>0)
			upick.push(ctl.options[i].value);

	if(upick.length > 0) {
		setCookie('res_cols', upick.join(';'), 'Fri, 01-Jan-2199 00:01:00 GMT', '/');
	}else
		deleteCookie('res_cols','/');

	return true;
}

function
FillForms()
{
             loadColumnList();

             var tmp = document.getElementsByTagName('input');
             for (var i=0;i<tmp.length;i++) {
                 if (tmp[i].id == 'save') {
                     switch (tmp[i].type){
                         case ("text"): 
                             tmp[i].value=getCookie(tmp[i].name);
                             break;
                         case ("checkbox"):
                             if ( (getCookie(tmp[i].name)=="false") || (getCookie(tmp[i].name)=="") ) {
                                 tmp[i].checked=0;
                             } else {
                                 tmp[i].checked=1;
                             }
    //                         alert(">"+getCookie(tmp[i].name));
                             break;
                     }
                 }
             }
            return;
        }

function
SaveForm()
{

         var tmp = document.getElementsByTagName('input');
         var tmp_str;
         var tmp_str_val;

         for (var i=0;i<tmp.length;i++) {
             if (tmp[i].id == 'save') {
                 tmp_str=tmp[i].name;
                 switch (tmp[i].type){
                     case ("text"): 
                         tmp_str_val=tmp[i].value;
                         break;
                     case ("checkbox"):
                         if (tmp[i].checked) {
                             tmp_str_val="true";
                         } else {
                             tmp_str_val="false";
                         }
                         break;
                 }

                 if (tmp_str_val.length > 0 ) {
                         setCookie(tmp_str,tmp_str_val,'Fri, 01-Jan-2099 00:01:00 GMT','/'); 
                 } else {
                         deleteCookie(tmp_str,'/') 
                 }
             }
         }
         

        saveColumnList();
	alert('Configuration saved into your browser');
       return false;
    }
--></script>
</head>

<body style="margin:5px" onload="CheckCookies() ? FillForms() : alert('Cookies should be enabled!'); loadColumnList()">
<fieldset style="width:60%">
    <legend>Column list configuration</legend>
    <table border=1><tr><td><form name="myForm" onSubmit="return(false)"><td>
	<select id="sel1" size="15" name='sel1' multiple width=300px>
<option value=''></option>
value='WL_CLUSTER_PORT_ISF_RDS'>WL_CLUSTER_PORT_ISF_RDS</option>
<option value='WL_CLUSTER_PORT_IWS'>WL_CLUSTER_PORT_IWS</option>
<option value='WL_CLUSTER_PORT_LAB'>WL_CLUSTER_PORT_LAB</option>
<option value='WL_CLUSTER_PORT_RNV'>WL_CLUSTER_PORT_RNV</option>
<option value='WL_CLUSTER_PORT_RPT'>WL_CLUSTER_PORT_RPT</option>
<option value='WL_CLUSTER_PORT_SWP'>WL_CLUSTER_PORT_SWP</option>
<option value='WL_CLUSTER_PORT_TQC'>WL_CLUSTER_PORT_TQC</option>
<option value='WL_HOME'>WL_HOME</option>
<option value='WL_HTTP_PORT'>WL_HTTP_PORT</option>
<option value='WL_HTTP_PORT_INT'>WL_HTTP_PORT_INT</option>
<option value='WL_NM'>WL_NM</option>
<option value='WL_NODEMANAGER'>WL_NODEMANAGER</option>
<option value='WL_NODEMANAGER_PORT'>WL_NODEMANAGER_PORT</option>
<option value='WL_PORT_ADMIN'>WL_PORT_ADMIN</option>
<option value='WPDIR'>WPDIR</option>
<option value='WPIPCDIR'>WPIPCDIR</option>
<option value='WPLANG'>WPLANG</option>
<option value='WPTMP'>WPTMP</option>
<option value='WSM_CGI_DIR'>WSM_CGI_DIR</option>
<option value='WSM_DOC_DIR'>WSM_DOC_DIR</option>
<option value='WSM_WS_CMD'>WSM_WS_CMD</option>
<option value='XALANCROOT'>XALANCROOT</option>
<option value='XERCESCROOT'>XERCESCROOT</option>
<option value='YPBIND_MAXWAIT'>YPBIND_MAXWAIT</option>
<option value='_'>_</option>
<option value='_FTOK_MINOR'>_FTOK_MINOR</option>
<option value='_GLOBAL'>_GLOBAL</option>
<option value='_TRACELEVEL_'>_TRACELEVEL_</option>
    </select>
	<td><input type="button" value=">>" onclick="moveOption('sel1', 'columns');"><br>
	<input type="button" value="<<" onclick="moveOption('columns', 'sel1');">
	    <td><select  id='columns' size="15" name="columns" multiple width=300px>
		</select></table>
    <span style="font-size:small; color:grey">You can select multiple fields
    with &lt;shift&gt;+click and(or) &lt;ctrl&gt;+clik</span>
    </form>
</fieldset>
<br/>
<fieldset style="width:60%">
    <legend>User Program menu configuration</legend>
    <b>Action:</b>&nbsp;<input id="save" type="text" name="action1"
	value="" size="30">&nbsp;&nbsp;
    <b>Name:</b>&nbsp;<input id="save" type="text" name="action1-name"
	value="" size="30">
    <br/>
    <b>Action:</b>&nbsp;<input id="save" type="text" name="action2"
	value="" size="30">&nbsp;&nbsp;
    <b>Name:</b>&nbsp;<input id="save" type="text" name="action2-name"
	value="" size="30">
    <br/>
    <b>Action:</b>&nbsp;<input id="save" type="text" name="action3"
	value="" size="30">&nbsp;&nbsp;
    <b>Name:</b>&nbsp;<input id="save" type="text" name="action3-name"
	value="" size="30">
    <br/>
    <b>Action:</b>&nbsp;<input id="save" type="text" name="action4"
	value="" size="30">&nbsp;&nbsp;
    <b>Name:</b>&nbsp;<input id="save" type="text" name="action4-name"
	value="" size="30">
    <br/>
    <b>Action:</b>&nbsp;<input id="save" type="text" name="action5"
	value="" size="30">&nbsp;&nbsp;
    <b>Name:</b>&nbsp;<input id="save" type="text" name="action5-name"
	value="" size="30">
    <br/>
    <b>Action:</b>&nbsp;<input id="save" type="text" name="action6"
	value="" size="30">&nbsp;&nbsp;
    <b>Name:</b>&nbsp;<input id="save" type="text" name="action6-name"
	value="" size="30">
    <br/>
    <b>Action:</b>&nbsp;<input id="save" type="text" name="action7"
	value="" size="30">&nbsp;&nbsp;
    <b>Name:</b>&nbsp;<input id="save" type="text" name="action7-name"
	value="" size="30">
    <br/>
    <b>Action:</b>&nbsp;<input id="save" type="text" name="action8"
	value="" size="30">&nbsp;&nbsp;
    <b>Name:</b>&nbsp;<input id="save" type="text" name="action8-name"
	value="" size="30">
    <br/>
    <b>Action:</b>&nbsp;<input id="save" type="text" name="action9"
	value="" size="30">&nbsp;&nbsp;
    <b>Name:</b>&nbsp;<input id="save" type="text" name="action9-name"
	value="" size="30">
    <br/>
    <b>Action:</b>&nbsp;<input id="save" type="text" name="action10"
	value="" size="30">&nbsp;&nbsp;
    <b>Name:</b>&nbsp;<input id="save" type="text" name="action10-name"
	value="" size="30">
</fieldset>
<br/>
<fieldset style="width:60%">
    <legend>Proto-prefix configuration</legend>
    <b>Protocol:</b>&nbsp;<input
	id="save" type="text" name="proto_prefix"
	value="" size="10">
    (default: [url]telnet://)[/url]
    <br/>
    <span style="font-size:small; color:grey">This value is used as prefix
    in direct links to products on 'environment control page'</span>
</fieldset>
<br/>
<div>
<input type="submit" value="Save config"
    onclick="CheckCookies()? SaveForm():alert('Cookies should be enabled!')"/>
<input type="submit" value="Restore config"
    onclick="CheckCookies()? FillForms():alert('Cookies should be enabled!')"/>
</div>
 
</body>
</html>
Ответ:
Сообщение от Wagner
Появилась задача переносить option из одного select'a в другой.
Я бы вам предложил не искать обмен, а продать квартиру и купить другую квартиру, как сейчас и принято делать.
Вопрос: содержимое option value в span

Всем привет
Имеется селект
<select id="select" name="select">
<option value="1">город1/option>
<option value="2">город2</option>
<option value="3">город3</option>
</select>

и спан
<span id="gorod"></div>

При выборе определенного option value осуществляется его дальнейшая запись по кукам и отображение при обновлении страницы, с ним проблем нет

Но не получается значение выбранного option value передать в спан, он так же должен отображаться на страницах сайта при обновлении

скрипт
<script type="text/javascript" >
var select = document.getElementById('select');
select.onchange = function () {

    var date = new Date();
    date.setDate(date.getDate() + 7);
 
    document.cookie = 'select=' + select.value +'; path=/; expires=' + date.toUTCString();
 
}
</script>
<script>
function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
            "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
 
var select = document.getElementById('select'),
cookie = getCookie('select');
 
if (cookie) {
    select.value = cookie;
}
</script>
<script type="text/javascript" >
function city() {
    var select = document.getElementById('select'),
        target = document.getElementById('gorod'),
        cities = ['1', '2', '3'];
    target.innerHTML = cities[select.value];
}



</script>

Помогите пожауйста
Ответ:
Сообщение от рони
ultrahomie,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body><select id="select" name="select">
<option value="1">город1</option>
<option value="2">город2</option>
<option value="3">город3</option>
</select>
<span id="gorod"></span>
<script type="text/javascript" >
var select = document.getElementById('select');
select.onchange = function () {
    city();
    var date = new Date();
    date.setDate(date.getDate() + 7);

    document.cookie = 'select=' + select.value +'; path=/; expires=' + date.toUTCString();

}

function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
            "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

var cookie = getCookie('select');

if (cookie) {
    select.value = cookie;

}

function city() {
    var target = document.getElementById('gorod'),
        cities = {'1':'город1', '2':'город2', '3':'город3'};
    target.innerHTML = cities[select.value];
}
city()


</script>


</body>
</html>
большое спасибо, всё работает
Вопрос: Значение из select option

Есть такая часть кода:
e.forEach(function (e) {
        t.forEach(function (t) {
            var months = 1;
            var value = 1;
            e == t.id ?
                $('<div class="unit" data-id="' + t.id + '"><div class="billboard-address">' + t.address +
                    '<a href="" class="close"></a></div><label style="margin: 0 14px 0 0; display: inline-block;' +
                    ' float: right;"><input type="checkbox" name="need_design" value="1" checked="checked" ' +
                    'style="width: 14px;"><div class="label">Разработать макет рекламного щита</div></label>' +
                    '<div class="test">Стоимость аренды щита за 1 месяц: ' + t.price + '</div>' +
                    '<div class="test">Срок размещения в месяцах: <script>function displayVals' + t.id + 
                    '(){value = $( "#select' + t.id + '" ).val();};' +
                    '$( "select' + t.id + '" ).change( displayVals' + t.id + ' );displayVals' + t.id +
                    '();</script><select id="select' + t.id + 
                    '" onChange="displayVals' + t.id + '(); alert(value);">' +
                    '<option value="1">1</option><option value="2">2</option><option value="3">3</option>' +
                    '<option value="4">4</option><option value="5">5</option><option value="6">6 (скидка -6%)</option>' +
                    '<option value="7">7 (скидка -7%)</option><option value="8">8 (скидка -8%)</option>' +
                    '<option value="9">9 (скидка -9%)</option><option value="10">10 (скидка -10%)</option>' +
                    '<option value="11">11 (скидка -11%)</option><option value="12">12 (скидка -12%)</option>' +
                    '</select>' + 
                    '<div class="new-price">Итоговая цена по данному щиту: <span>' + months*t.price*value + '</span>' +
                    '</div></div></div>').prependTo("#request-form .selected-billboards .list")
                : r.push(e)
        })
    }),

Прошу прощение за неудобоваримость кода, пишу как умею..

При изменении select option у меня вылетает окошка alert'ом, и в нем отображается правильное текущее value. А как эту value динамически менять вот в этом месте:
...
'<div class="new-price">Итоговая цена по данному щиту: <span>' + months*t.price*value + '</span>' +
...
Чтобы при изменении select option value - сразу показывалось итоговое значение?
Ответ:
Сообщение от Spass
Пожалуйста.

На будущее отделяй мух от котлет (js от html), и все будет намного проще.
Тема в том, что так было изначально.. но совет приму))
Есть еще подобный вопрос, как теперь можно отловить все итоговые значения каждого товара и просуммировать их..
Т.е. это должна быть функция внутри функции $('div.unit select').on('change', function(), правильно?
---
С этим сам разобрался
var sumCost = 0, sumDiscount = 0;
    $('.shield-price').each(function(){
        sumCost += parseInt($(this).html(), 10);
    });
    $('.final-cost').html('Итого: <span>'+sumCost+'</span> руб.');
    $('.shield-discount').each(function(){
        sumDiscount += parseInt($(this).html(), 10);
    });
    $('.final-discount').html('Итоговая скидка: <span>'+sumDiscount+'</span> руб.');

Однако, если все значения seect выставить в 1, т.е. в то положение, когда самой скидки нет - то остается последнее значение скидки.. вместо нуля((((
Так понимаю, нужна проверка на значение всех и каждого select option val, верно?
Вопрос: Скрытые option в зависимых select не работают в Safari и IE

Добрый день, умные люди!

Очень прошу помощи.

У заказчика на сайте нужен калькулятор с зависимыми select. При выборе в одном из общего кол-ва option выбираются нужные, а остальные скрываются.

Написала код - прекрасно работает везде, кроме IE и Safari :wall:
А где-то (по объяснениям заказчика не понимаю) выпадает список с выбранными нужными option, а ниже - ещё столько же "белой бумаги" (пустые селекты/пустые поля ??).

Сам код


<div class="calk_form">
					<div class="form">
						<select name="calc_city" id="calc_city" class="full" onchange="calc_tarif.disabled = !this.selectedIndex">
                            <option value="" disabled selected>Выберите город</option>
                            <option value="1" class="1">Люберцы</option>	
                            <option value="1" class="1">Москва</option>
                            <option value="1" class="1">Московский</option>
                            <option value="2" class="2">Калуга</option>
                            <option value="3" class="3">Малоярославец</option>
                            <option value="4" class="4">Обнинск</option>
                            <option value="5" class="5">Орехово-Зуево</option>
                        </select>
			<select name="calc_tarif" id="calc_tarif" class="full" disabled onchange="calc_proba.disabled = !this.selectedIndex">
                            <option value="" class="1">Программа кредитования</option>
                            <option value="" class="2">Программа кредитования</option>
                            <option value="" class="3">Программа кредитования</option>
                            <option value="" class="4">Программа кредитования</option>
                            <option value="" class="5">Программа кредитования</option>
	                   <option value="1" class="1">7:40</option>
                          <option value="2" class="1">До получки</option>
                          <option value="3" class="1">Пенсионный</option>
                          <option value="4" class="1">Супер Ноль %</option>
                          <option value="5" class="1">Свои Люди</option>
	                    <option value="1" class="2">7:40</option>
                            <option value="1" class="3">7:40</option>
                            <option value="1" class="4">7:40</option>
                            <option value="1" class="5">7:40</option>
	                    <option value="3" class="2">Пенсионный</option>
                            <option value="3" class="3">Пенсионный</option>
                            <option value="4" class="4">Супер Ноль %</option>
                            <option value="5" class="2">Свои Люди</option>
                            <option value="5" class="3">Свои Люди</option>
                            <option value="5" class="4">Свои Люди</option>
                            <option value="5" class="5">Свои Люди</option>
                        </select>
						<div class="clearfix">
			<select name="calc_proba" id="calc_proba" class="mini" disabled>
                <option value="" class="1">Проба</option>
                <option value="" class="2">Проба</option>
                <option value="" class="3">Проба</option>
                <option value="" class="4">Проба</option>
                <option value="" class="5">Проба</option>
		<option value="770" class="1">Au 375</option>
                <option value="850" class="2">Au 375</option>
                <option value="770" class="3">Au 375</option>
                <option value="500" class="4">Au 375</option>
                <option value="770" class="5">Au 375</option>
		<option value="1200" class="1">Au 500</option>
                <option value="1250" class="2">Au 500</option>
                <option value="1000" class="3">Au 500</option>
                <option value="700" class="4">Au 500</option>
                <option value="1000" class="5">Au 500</option>   
		<option value="1450" class="1">Au 583</option>
                <option value="1500" class="2">Au 583</option>
                <option value="1200" class="3">Au 583</option>
                <option value="1000" class="4">Au 583</option>
                <option value="1200" class="5">Au 583</option>
		<option value="1550" class="1">Au 585</option>
                <option value="1550" class="2">Au 585</option>
                <option value="1450" class="3">Au 585</option>
                <option value="1200" class="4">Au 585</option>
                <option value="1450" class="5">Au 585</option>
		<option value="1850" class="1">Au 750</option>
                <option value="1850" class="2">Au 750</option>
                <option value="1840" class="3">Au 750</option>
                <option value="1600" class="4">Au 750</option>
                <option value="1840" class="5">Au 750</option>
		<option value="2000" class="1">Au 850</option>
                <option value="2000" class="2">Au 850</option>
                <option value="1930" class="3">Au 850</option>
                <option value="1620" class="4">Au 850</option>
                <option value="1930" class="5">Au 850</option>
		<option value="2050" class="1">Au 900</option>
                <option value="2050" class="2">Au 900</option>
                <option value="1960" class="3">Au 900</option>
                <option value="1650" class="4">Au 900</option>
                <option value="1960" class="5">Au 900</option>
		<option value="2200" class="1">Au 999</option>
                <option value="2200" class="2">Au 999</option>
                <option value="2060" class="3">Au 999</option>
                <option value="1700" class="4">Au 999</option>
                <option value="2060" class="5">Au 999</option>
		<option value="10" class="1">Ag 830/875</option>
                <option value="10" class="2">Ag 830/875</option>
                <option value="10" class="3">Ag 830/875</option>
                <option value="10" class="4">Ag 830/875</option>
                <option value="10" class="5">Ag 830/875</option>
		<option value="15" class="1">Ag 925</option>
                <option value="15" class="2">Ag 925</option>
                <option value="15" class="3">Ag 925</option>
                <option value="15" class="4">Ag 925</option>
                <option value="15" class="5">Ag 925</option>
</select>
							<input id="calc_weight" class="mini" placeholder="Вес в граммах">
						</div>
					</div>
					<div class="result"> 
						<p id="calc_error"></p>
						<p id="val_info" >Особые условия: <strong><span></span></strong></p> 
						<p id="val1" >Оценка: <strong><span>0</span> РУБ.</strong></p> 
						<p id="val2">Процентная ставка (в день): <strong><span>0</span>%</strong></p>
						<p id="val3">Сумма к возврату через месяц (30 дней): <strong><span></span>* РУБ.</strong></p>
						<p id="val4">Процент за месяц (30 дней): <strong><span></span> РУБ.</strong></p>
						<p id="val_m" class="mini">* возможны изменения тарифных планов (уточнять информацию по телефону или в отделении ломбарда).</p>
					</div>
					<div class="submit" align="center">
						<button id="calc_succes">Рассчитать сумму</button>
					</div>
				</div>


JS не хочет вставлять - ругается.




Подключена
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Ответ: Катенька,
как спрятать option? ==> удалить!!!
было
calc_city.change(function(event){
  var type = $(event.target).val();
  $('#calc_proba option').each(function(id, option){
  	option = $(option);
    if(option.attr('class')==type){
    	option.toggleOption(true);
    }else{
    	option.toggleOption(false);
    }
  })
});

ниже возможный варант
var op_proba = $('#calc_proba option');
calc_city.change(function(event){
  var type = this.value;
  $('#calc_proba')[0].options.length = 0;
  op_proba.each(function(id, option){
  	option = $(option);
    if(option.attr('class')==type){
    	option.appendTo("#calc_proba")
  }})
});
Вопрос: <select><option> список.

Здравствуйте уважаемые. Помогите разобраться.
Есть простой выпадающий список с выбором категории.
<select class="material-select"><option selected="selected" value="1">1 Категория</option><option value="2">2 Категория</option><option value="3">3 Категория</option><option value="4">4 Категория</option><option value="5">5 Категория</option><option value="3">6 Фотопечать</option> </select>

Сами значения value от 1 до 5.
var rolls=[];
rolls[0]=[2.745, 4.45, 6.6, 8.9, 11.2];


Это переменная в которую заносится значение value.
var vid_materiala=parseInt(my_parrent.find('select').val());


Вопрос в следующем, какую конструкцию применить, чтобы сделать следующее: добавить к каждой категории картинки в виде небольших боксов которые можно будет выбрать ?

Пример ДО.

Пример ПОСЛЕ.
Ответ: KEMPZOR,
Зачем вам my_parrent.find('select').val() ?

Вы пример пост7 смотрели?
Вот здесь
$("li").on("click", function () {
             $("#res").html($(this).html() + rolls[+$(this).val() - 1]);
         });

Можете получить из li все что угодно, например,
rolls[+$(this).val() - 1]
- цена категории
Можно добавить
var image = $(this).find("img").prop("src");
- имя картинки ткани,
Если нужно - можно добавить в li еще свойства, в которых хранить и доставать при клике нужные вам параметры. (см. добавления в пост7)
Вопрос: Если option задать в input

Добрый день!

При выборе option, его id заносится в input. Как сделать, что если option пуст (при клике), не заносить данные в input.

Или сделать проверку, если option пусто И input не пусто = стереть данные в input.

<input type='text' name='idData1' id='idData1'>
<input type='text' name='idData2' id='idData2'>

<select name='countData[]' id='1' onchange="document.getElementById('idData1').value=id">
<option></option>
<option>1</option>
<option>2</option>
</select>

<select name='countData[]' id='2' onchange="document.getElementById('idData2').value=id">
<option></option>
<option>1</option>
<option>2</option>
</select>
Ответ: SLameN, за то, что хоть тестовый пример сделал...
Как вариант.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
function test(Obj){
	var val=(Obj.value=='')? '': Obj.id;
	document.getElementById('idData'+Obj.id).value=val;
};
</script>
</head>
<body>
<input type='text' name='idData1' id='idData1' />
<input type='text' name='idData2' id='idData2' />
<select name='countData[]' id='1' onchange="test(this)">
	<option></option>
	<option>1</option>
	<option>2</option>
</select>
<select name='countData[]' id='2' onchange="test(this)">
	<option></option>
	<option>1</option>
	<option>2</option>
</select>
</body>
</html>
Вопрос: checkbox, radio и select c option

как понять, что стоит галочка в checkbox? как понять, какой выбран radio? как понять какой option выбран в select?
<form>
<input type="checkbox">Согласен</input><br>
<input type="radio" name="A">Да</input><br>
<input type="radio" name="A">Нет</input><br>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select><br>
<input type="submit" value="Enter">
</form>

И можно ли выбрать по умолчанию какой-то определенный option в select? И можно ли определить по умолчанию в каком radio будет 'точка'? И можно ли сделать, чтоб по умолчанию стояла галочка в checkbox?
Ответ: Сергей354,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте .