2016-10-03 2 views
2

У меня есть следующий код:Возьмите пользовательский атрибут вместо Вала() с JQuery

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.pack.js"></script> 
</head> 
<body> 
<select name="size"> 
    <option custAttr="0" value="0" disabled selected>Value ↓</option> 
    <option custAttr="10" value="10">AAA (10)</option> 
    <option custAttr="20" value="20">BBB (20)</option> 
    <option custAttr="30" value="30">CCC (30)</option> 
</select> 

<label class="result"></label> 

<script> 
$(document).ready(function() { 
    $('select').on('change', function() { 
     $('.result').text(
      $('select[name=size]').val() 
     ); 
    }); 
}); 
</script> 
</body> 
</html> 

На самом деле скрипт берет контент из value="". Есть ли способ, которым сценарий берет код из моего настраиваемого атрибута custAttr=""?

+1

Посмотрите на '.attr()' –

ответ

5

Прежде всего обратите внимание, что создание ваших собственных атрибутов будет означать, что ваш HTML недействителен, что может иметь неожиданные последствия. Используйте атрибуты data-* для хранения собственных данных. Оттуда вы можете использовать option:selected, чтобы получить требуемое значение данных. Попробуйте это:

$(document).ready(function() { 
 
    $('select').on('change', function() { 
 
    $('.result').text($('select[name=size] option:selected').data('cust-attr')); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="size"> 
 
    <option data-cust-attr="0" value="0" disabled selected>Value ↓</option> 
 
    <option data-cust-attr="10" value="10">AAA (10)</option> 
 
    <option data-cust-attr="20" value="20">BBB (20)</option> 
 
    <option data-cust-attr="30" value="30">CCC (30)</option> 
 
</select> 
 

 
<label class="result"></label>

+0

Спасибо. Работает. Я должен подождать 5 минут, чтобы согласиться. – David

+0

Нет проблем, рад помочь –

+0

Еще маленький вопрос: знаете ли вы, как заменить точку запятой. Например. '123,45' вместо' 123.45'. – David

1

Насколько я знаю, вы можете сделать это, как этот

$("#myselect option:selected").attr('custAttr'); 
1

attr() должен сделать трюк!

$('select[name=size]').attr('custAttr'); 
Смежные вопросы