How to change html attribute value with jquery

Question

I have select tag of HTML I want to change /id/ with help jquery in data-ajax--url attribute

<select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All">
                            <option></option>
                        </select>

Answer 1

Like this

NOTE Your attribute name is invalid.

 $(function() { const $sel = $("#consignments_customername"); const dataurl = $sel.attr("data-ajax--url"); $sel.attr("data-ajax--url",dataurl.replace(/\/id\//,"/help/")); console.log($sel.attr("data-ajax--url")); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option></option> </select>

If you change the -- to an underscore, you could do this in plain JS

 window.addEventListener("load",() => { const sel = document.getElementById("consignments_customername"); const dataurl = sel.dataset.ajax_url; sel.dataset.ajax_url = dataurl.replace(/\/id\//,"/help/"); console.log(sel.dataset.ajax_url); })

 <select data-ajax_url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option></option> </select>

Answer 2

You don't need jQuery for this - simple plain vanilla js will do it.

First -use querySelector to get the selecto list via its id, then get the data-attribute via getAttribute()... modifiy it be replace() - or you could split th string and rejoin it - then set the new string as the data-attibute via setAttribute().

 const el = document.querySelector('#consignments_customername'); const newURL = el.getAttribute('data-ajax--url').replace(/\/id\//,'/help/'); el.setAttribute('data-ajax--url', newURL); console.log(el); //shows the newURL has been applied to the data-attribute

 <select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option>option 1</option> </select>

If you wanted to do this with split() and join() then its almost the same code

 const el = document.querySelector('#consignments_customername'); const newURL = el.getAttribute('data-ajax--url').split('/id/').join('/help/'); el.setAttribute('data-ajax--url', newURL); console.log(el); //shows the newURL has been applied to the data-attribute

 <select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option>option 1</option> </select>

Answer 3

Catch data value, split, change with new value and join.

 let str = $('#consignments_customername').data('ajax--url'); str = str.split('/'); let id = str[3]; str[3] = "newID"; let newurl = str.join('/') $('#consignments_customername').attr('data-ajax--url', newurl); console.log(newurl);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option></option> </select>

Answer 4

I will join and also give an answer. Method replace() .

 let data_ajax_url = $('#consignments_customername'); data_ajax_url.attr('data-ajax--url', data_ajax_url.attr('data-ajax--url').replace(/\id/, 'id_new')); console.log(data_ajax_url.attr('data-ajax--url'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option></option> </select>