Dodanie dodatkowych danych w celu wybrania opcji za pomocą jQuery

139

Mam nadzieję, że bardzo proste pytanie.

Mam takie zwykłe <select>pudełko

<select id="select">
    <option value="1">this</option>
    <option value="2">that</option>
    <option value="3">other</option>
</select>

Mogę uzyskać wybraną wartość (używając $("#select").val()) i wyświetlaną wartość wybranego elementu (używając $("#select :selected").text().

Ale jak mogę przechowywać dodatkową wartość w <option>tagu? Chciałbym móc zrobić coś podobnego <option value="3.1" value2="3.2">other</option>i uzyskać wartość value2atrybutu (w przykładzie byłoby to 3,2).

javascript jquery html

— Jim Smith
źródło

chcesz dodać element do pola wyboru? czy chcesz mieć możliwość wybrania więcej niż jednego na raz i uzyskania wyników?

— zsalzbank

nie, po prostu chcę, aby w tagu <option> było jak value2 = "", ale to nie działa

— jim smith

Twoje pytanie nie jest jasne (przynajmniej dla mnie). Co masz na myśli, mówiąc „zapisz inną wartość w wybranych opcjach”? Czy masz na myśli, że chcesz dodać nową opcję do selekcji, która pojawi się użytkownikowi po otwarciu?

— Phrogz

15

nie zaprzecza logice ani rozsądkowi, rany. Mam podobne pytanie / przypadek, więc mogę porównać wartości między selekcjami i zapisać tekst jednej opcji do opcji drugiej, zachowując wartości / teksty tego wyboru, jednym ze sposobów wydaje się, że jest to możliwe poprzez dane, jak wskazuje poniższa odpowiedź. tylko dlatego, że TY o tym nie pomyślałeś, nie oznacza, że jest to sprzeczne z logiką i rozumem. OP był wystarczająco przyzwoitym pytaniem, po prostu musiał być skierowany we właściwym kierunku, aby nie dostać dużej szklanki zadowolenia z siebie.

— user1783229

1

zawsze możesz dodać dowolną liczbę dodatkowych parametrów, używając danych-cokolwiek i używając .data ('cokolwiek'), gdziekolwiek w przeciwnym razie zrobiłbyś .value. po prostu zamień wszystko na value2 lub podobne do swoich upodobań

320

Znaczniki HTML

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

Kod

// JavaScript using jQuery
$(function(){
    $('select').change(function(){
       var selected = $(this).find('option:selected');
       var extra = selected.data('foo'); 
       ...
    });
});

// Plain old JavaScript
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

Zobacz to jako działający przykład przy użyciu jQuery tutaj: http://jsfiddle.net/GsdCj/1/
Zobacz to jako działający przykład przy użyciu zwykłego JavaScript tutaj: http://jsfiddle.net/GsdCj/2/

Używając atrybutów danych z HTML5, możesz dodawać dodatkowe dane do elementów w sposób poprawny składniowo, który jest również łatwo dostępny z jQuery.

— Phrogz
źródło

@jimsmith Tak, będzie. (Jeśli uznasz, że którakolwiek z tych odpowiedzi jest przydatna, zagłosuj na nią. Powinieneś również oznaczyć jedną jako „zaakceptowaną”, jeśli uznasz, że najlepiej rozwiązała twój problem.)

— Phrogz

1

Co? Nie, nie będzie. Będzie działać we wszystkich przeglądarkach obsługujących atrybuty danych HTML5.

— glomad

13

@ithcy Wszystkie przeglądarki obsługują (i mają od ponad 10 lat) „nieprawidłowe” atrybuty w znacznikach oraz pobierają / ustawiają je przez DOM. Atrybuty „danych” HTML5 to po prostu atrybuty niestandardowe ze schematem nazewnictwa i nowym standardem, który deklaruje, że są legalne.

— Phrogz

@Phrogz Wiem to. Nie jest to kwestia tego, czy przeglądarki „obsługują” nieprawidłowe atrybuty, ale raczej kwestia ich ignorowania. Naprawdę nie ma innego sposobu na napisanie użytecznej przeglądarki internetowej :) Jednak myślę, że rozciągnięcie atrybutów danych jest „poprawne składniowo” - zależy to od kontekstu. Jeśli masz typ dokumentu HTML5, to tak, są prawidłowe. W przeciwnym razie nie są i spowodują niepowodzenie weryfikacji W3C.

— glomad

@ithcy Przeglądarki „ignorują” je, o ile nie robią z nimi nic specjalnego, ale nie ignorują ich, o ile są w pełni dostępne getAttribute(). Odpowiadałem na Twoje początkowe twierdzenie, że moja odpowiedź nie będzie działać we wszystkich przeglądarkach. Podtrzymuję moje stwierdzenie, że będzie działać we „wszystkich” przeglądarkach (w tym przypadku dość hojna definicja słowa „wszystkie”). Pokaż przeglądarkę, która obsługuje jQuery, ale nie obsługuje tych atrybutów danych - nawet z dokumentem innym niż HTML5 - a zjem swoje słowa.

— Phrogz,

5

Dla mnie brzmi to tak, jakbyś chciał utworzyć nowy atrybut? Czy chcesz

<option value="2" value2="somethingElse">...

Aby to zrobić, możesz to zrobić

$(your selector).attr('value2', 'the value');

A następnie, aby go odzyskać, możesz użyć

$(your selector).attr('value2')

To nie będzie prawidłowy kod, ale myślę, że spełnia swoje zadanie.

— mikesir87
źródło

Inną metodą jest użycie $ (selector) .data ('value2', "your value") i $ (selector) .data ('value2') w celu pobrania ... które nadal jest prawidłowe.

— mikesir87

Cóż, składniowo nie byłoby poprawne posiadanie niestandardowych atrybutów w oryginalnych znacznikach, ale a) nigdy nie widziałem żadnej przeglądarki od czasów NS4, która miała z tym jakiś problem, oraz b) jeśli możesz zmodyfikować DOM stworzyć coś, co jest „niepoprawne składniowo”, czy naprawdę?

— Phrogz

tak, to jest naprawdę ... nieważne. po co używać dowolnych właściwości, skoro właściwości data- * zostały zdefiniowane w standardzie html5.

— stephenbayer

3

Jak wspomina @stephenbayer ... poprawnym sposobem na to teraz jest użycie obsługiwanych przez HTML5 właściwości data- *. Te właściwości nie były tak naprawdę w pobliżu / w intensywnym użytkowaniu, gdy pierwotnie odpowiedział w 2010 roku :)

— mikesir87

2

Zrobiłem dwa przykłady na podstawie tego, co myślę, że twoje pytanie może brzmieć:

http://jsfiddle.net/grdn4/

Sprawdź to, aby zapisać dodatkowe wartości. Używa atrybutów danych do przechowywania innej wartości:

http://jsfiddle.net/27qJP/1/

— zsalzbank
źródło

-1

Znaczniki HTML / JSP:

<form:option 
data-libelle="${compte.libelleCompte}" 
data-raison="${compte.libelleSociale}"   data-rib="${compte.numeroCompte}"                              <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>

KOD ZAMÓWIENIA: Wydarzenie: zmiana

var $this = $(this);
var $selectedOption = $this.find('option:selected');
var libelle = $selectedOption.data('libelle');

Aby mieć element libelle.val () lub libelle.text ()

— Fadid
źródło

<form: option data-libelle-compte = "$ {compte.libelle} data-raison =" $ {compte.raison} "data-compte =" $ {compte.numero} "> <c: out value =" $ {compte.libelleCompte} MAD "/> </ form: option>

— Fadid

-4

Aby zapisać inną wartość w wybranych opcjach:

$("#select").append('<option value="4">another</option>')

— Kyle
źródło