jQuery: Add text to existing selection list option values

Question

I have a selection list:

<select class="inputbox" onchange="document.location.replace(this.value);" >
    <option dir="ltr" value="/nl" >Nederlands (NL)</option>
    <option dir="ltr" value="/de" >Deutsch (DE)</option>
    <option dir="ltr" value="/en/orange" selected="selected">English (UK)</option>
</select>

And I need the the content from this span...

<dd class="category-name">Category: <span itemprop="genre">Orange</span></dd>

to be added (including slash) to all values except the selected one. So that the result will be:

<select class="inputbox" onchange="document.location.replace(this.value);" >
    <option dir="ltr" value="/nl/orange" >Nederlands (NL)</option>
    <option dir="ltr" value="/de/orange" >Deutsch (DE)</option>
    <option dir="ltr" value="/en/orange" selected="selected">English (UK)</option>
</select>

You want to add "orange" to the first two options /nl and /de? — Sithu
– Sithu, Commented Nov 11, 2014 at 10:20

Arun P Johny · Accepted Answer · 2014-11-11 10:19:51Z

1

You can use .val() like

var itemprop = $('.category-name span').text().toLowerCase().trim();
$('select.inputbox option:not(:selected)').val(function(i, text) {
  return text + '/' + itemprop;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<dd class="category-name">Category: <span itemprop="genre">Orange</span></dd>
<select class="inputbox" onchange="document.location.replace(this.value);">
  <option dir="ltr" value="/nl">Nederlands (NL)</option>
  <option dir="ltr" value="/de">Deutsch (DE)</option>
  <option dir="ltr" value="/en/orange" selected="selected">English (UK)</option>
</select>

answered Nov 11, 2014 at 10:19

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Pieter Over a year ago

In another scenario I would like to just get the 'category' from the selected option (in this case '/orange') and append to the other values (i.e. /nl/orange). Is that possible?

Pieter Over a year ago

When the selected url contains more elements after split (i.e. '/en/orange/blue') it will append the first element only (i.e. '/nl/orange). How to append all elements after split if exist?

Collectives™ on Stack Overflow

jQuery: Add text to existing selection list option values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related