Jquery get selected option's value and custom attribute value

Question

var x = document.getElementById("selectCity"); 
var options = ["Bangalore", "Pune", "Kolkata"]; 

for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var element = document.createElement("option");
    element.textContent = opt;
    element.value = opt;
    x.appendChild(element);
}

$('select[name="cityDropdown"]').change(function(){
  cityName=$(this).val();
 });

Now with each city i want to store my circle name. and save it as an attribute and pass when the city is selected

i want to hardcode to a list of circle & city like 1.Lucknow UP 2. patna : bihar jharkhand 3. chdigard : punjab city name should be displayed in dropdown and when i select and proceed my cityname as well as circle name should be passed — Ssk
– Ssk, Commented Apr 21, 2015 at 6:43

Bhavesh G · Accepted Answer · 2015-04-21 06:58:24Z

1

You can Hardcode a custom attribute to a select's option. For example,

<option circle="UP" value="Lucknow">Lucknow</option>

and get it's value with jquery like this,

var circle = $('option:selected', this).attr("circle");

HTML

<select name="cityDropdown">
  <option circle="UP" value="Lucknow">Lucknow</option>
  <option circle="Bihar" value="Patana">Patana</option>
  <option circle="Punjab" value="Chandigarh">Chandigarh</option>
</select>

Javascript

$('select[name="cityDropdown"]').change(function(){
    var cityName = $(this).val();
    var circle = $('option:selected', this).attr("circle");
    console.log(cityName + " : " + circle);
});

Note : You can also use other custom attribute (custom attribute city for example). But you just need to use city as value of the option.

Here is the fiddle.

edited Apr 21, 2015 at 6:58

answered Apr 21, 2015 at 6:48

Bhavesh G

3,0285 gold badges47 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sarath Kumar · Accepted Answer · 2015-04-21 06:25:29Z

0

make a proper selector ..try this ..

 $('#selectCity').change(function(){
       cityName = $(this).val(); 
       console.log(cityName); // do something
     });

HERE is the fiddle..

answered Apr 21, 2015 at 6:25

Sarath Kumar

2,3531 gold badge14 silver badges26 bronze badges

1 Comment

Ssk Over a year ago

no my question is how do i make my city list a 2d array so that i save city as well as circle. and in my dripdown it gets called as <option circle="CircleName" city="cityName">cityName</option>

ozil · Accepted Answer · 2015-04-21 07:33:22Z

0

var x = document.getElementById("selectCity"); 
var options = ["Bangalore", "Pune", "Kolkata"]; 

for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var element = document.createElement("option");
    element.textContent = opt;
    element.value = opt;
    element.setAttribute('circle-name', 'your value'); // your attribute
    x.appendChild(element);
}

$('select[name="cityDropdown"]').change(function(){
  cityName=$(this).val();
 });

answered Apr 21, 2015 at 7:33

ozil

7,1639 gold badges38 silver badges62 bronze badges

Comments

Mohammad Ali Abdullah · Accepted Answer · 2022-06-01 08:40:42Z

0

var optionAttr = $('#cityDropdown option:selected').attr("circle");
var optionAttr1 = $(this).find('option:selected').attr("circle");

answered Jun 1, 2022 at 8:40

Mohammad Ali Abdullah

3312 silver badges10 bronze badges

2 Comments

General Grievance Over a year ago

Why suddenly use $(this)?

Besworks Over a year ago

You answer could be improved by including a description of your code so that others can understand what it does and how it addresses the question.

Collectives™ on Stack Overflow

Jquery get selected option's value and custom attribute value

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related