Add input value to option value with JQuery?

Question

I have been searching for quite a while now, but can not seem to find a comprehensive answer. I have the HTML code below and would like to add the typed in value of the input name="ytcustom" to option value="https://url.com/custom/"

What is a solid way to accomplish this?

<select id="youtube_dropdown">
<option value="https://url.com/mix/">Mix</option>
<option value="https://url.com/custom/">Custom</option>
</select>
<input name="ytcustom" id="ytcustom" type="text" class="ythide">

So when someone types a value into the textfield, i want that value to be added to the option value url.com/custom + val() — RobbTe
– RobbTe, Commented Mar 28, 2018 at 9:57
You first need to think of the event on which you want to add the input text as an option. For instance, if the user types a value in the enter box and hit enter, then add this value to the select box or when the input box looses focus then add the value to the select. — d_bhatnagar
– d_bhatnagar, Commented Mar 28, 2018 at 9:59

Vaidas · Accepted Answer · 2018-03-28 10:37:20Z

1

Here is the final version of my answer: using onkeyup event and using #youtube_dropdown > option:last to select an option element (although I would use ID selector if possible):

$(function() {
  $("#ytcustom").on("input", function() {
    var customUrl = 'https://url.com/custom/' + $(this).val();
    $("#youtube_dropdown > option:last").val(customUrl);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="youtube_dropdown">
<option value="https://url.com/mix/">Mix</option>
<option value="https://url.com/custom/">Custom</option>
</select>
<input name="ytcustom" id="ytcustom" type="text" class="ythide">

edited Mar 28, 2018 at 10:37

answered Mar 28, 2018 at 9:57

Vaidas

1,51314 silver badges21 bronze badges

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

6 Comments

RobbTe Over a year ago

Cool, this works. Is it also possible to add the textfield value without using a ID? Also do i need a button to fire the jquery? Or can i also add it instantly?

Vaidas Over a year ago

I've edited my answer. Please check if it does answer your questions

RobbTe Over a year ago

Hi, thanks! Your last code comes really close, however when chaning the input txt field it ADDs the data to the url instead of start over (without the previous textfield content).

Vaidas Over a year ago

So when you enter 'ABCD' to the input field, you want option's value to be 'ABCD' instead of 'url.com/custom/ABCD'?

RobbTe Over a year ago

No. i want it to be 'url.com/custom/ABCD'; but when i type ABCD then focusout, clean the txtfield and type ABCD again the value becomes 'url.com/custom/ABCDABCD';

|

4b0 · Accepted Answer · 2018-03-28 10:05:17Z

0

Remove and add attribute of custom option on text box focusout .

$("#ytcustom").focusout(function() {
  var str = $('#ytcustom').val();
  var lastValue = $('#youtube_dropdown option:last-child').val();
  var newValue = lastValue + str;
  $('#youtube_dropdown option:last-child').removeAttr('value');
  $('#youtube_dropdown option:last-child').attr('value', newValue);
  console.log($('#youtube_dropdown option:last-child').val());


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="youtube_dropdown">
<option value="https://url.com/mix/">Mix</option>
<option value="https://url.com/custom/">Custom</option>
</select>
<input name="ytcustom" id="ytcustom" type="text" class="ythide">

answered Mar 28, 2018 at 10:05

4b0

22.4k30 gold badges97 silver badges143 bronze badges

5 Comments

RobbTe Over a year ago

Very nice! Only when i type 'Test' it adds 'ttetestest' How come?

4b0 Over a year ago

See Updated answer

RobbTe Over a year ago

Hi, Is it necessary to fire it when i click outside the textfield? Also when changing the textfield value later, it ADDS the content again instead of using a 'clean sheet'..

4b0 Over a year ago

Its depend on when you want change URL and next time when you change text after clear your text box it's take new value at all.

RobbTe Over a year ago

So now it adds the textfield input but won't clear it. It keeps on adding.

Faraz Babakhel · Accepted Answer · 2018-03-28 10:44:08Z

0

Try This updated version

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#btnAdd").click(function(){
        var val=$('#ytcustom').val()
$("#optionID").val('https://url.com/custom/' + val);
            val=$('#ytcustom').val('');
            alert('Data Added');
        });
    });
    </script>
    </head>
    <body>

    <select id="youtube_dropdown">
    <option value="https://url.com/mix/">Mix</option>
    <option id="optionID" value="https://url.com/custom/">Custom</option>
    </select>
    <input name="ytcustom" id="ytcustom" type="text" class="ythide">
    <button id="btnAdd">ADD</button>

    </body>
    </html>

Without Click Button

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#ytcustom").change(function(){
        var val=$(this).val()
$("#optionID").val('https://url.com/custom/' + val);
            val=$(this).val('');
            alert('Data Added');
        });
    });
    </script>
    </head>
    <body>

    <select id="youtube_dropdown">
    <option value="https://url.com/mix/">Mix</option>
    <option id="optionID" value="https://url.com/custom/">Custom</option>
    </select>
    <input name="ytcustom" id="ytcustom" type="text" class="ythide">
    <button id="btnAdd">ADD</button>

    </body>
    </html>

edited Mar 28, 2018 at 10:44

answered Mar 28, 2018 at 9:56

Faraz Babakhel

6645 silver badges17 bronze badges

5 Comments

Faraz Babakhel Over a year ago

@RobbTe try this one

RobbTe Over a year ago

Hi, this adds an extra option. I would like the value to be added to the option value of <option value="https://url.com/custom/ + value of textfield

RobbTe Over a year ago

Cool, can this also be done without using a option ID and without using a button to add the data?

Faraz Babakhel Over a year ago

yes.. you can do it on =$('#ytcustom').change(function(){});

RobbTe Over a year ago

Hi sorry, not fully. I understand the change function can replace the click function but not how to use the option value, instead of optionID. Since i don't have an optionID i rather user its value.

Collectives™ on Stack Overflow

Add input value to option value with JQuery?

3 Answers 3

6 Comments

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related