1

I got a string like this:

var select_string = '<select><option>1</option><option>2</option></select>';

I need to add some data params to select in this string and get this string back in order to get the following:

select_string = '<select data-param1="param1" data-param2="param2"><option>1</option><option>2</option></select>';

I tried to use jQuery functions like .html() or .text() but it did not work. Like this:

select_string = $(select_string).data('param1', 'param1').html() //or .text()

Any ideas how to make it work would be helpful. Thank you.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Masha
  • 827
  • 1
  • 10
  • 30
  • 1
    Not exactly a duplicate, but [this question](https://stackoverflow.com/questions/2419749/get-selected-elements-outer-html) may have answers that are useful to your case. – Federico klez Culloca Jan 13 '20 at 15:20
  • Also related: https://stackoverflow.com/questions/7261619/jquery-data-vs-attr – isherwood Jan 13 '20 at 15:22
  • I'd be curious why you're doing this operation in the first place. Shouldn't you be working with objects instead of strings? – isherwood Jan 13 '20 at 15:23
  • See the [documentation](https://api.jquery.com/data/) `Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.` – R3tep Jan 13 '20 at 15:24

4 Answers4

6

You can use attr to add that attributes to the element

var select_string = '<select><option>1</option><option>2</option></select>';

var select = $(select_string).attr({
  'data-param1': 'param1',
  'data-param2': 'param2'
});

console.log(select.prop('outerHTML'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Since your attribute name starts with data-, if you want to get the value, you can use: 

select.data('param1'); // param1
select.data('param2'); // param2
Tân
  • 1
  • 15
  • 56
  • 102
1

EDIT: Titulum is right, jquery is not needed here.
But here is the working example usign jquery 

var selectString = '<select><option>1</option><option>2</option></select>';
var $select = $(selectString);
$select.attr("prop_key","prop_value");
var selectChanged = $select.prop('outerHTML');

console.log(selectChanged)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
meneroush
  • 61
  • 4
0

You don't need jQuery for this:

const myElement = document.createElement('div');
myElement.innerHTML = "<select><option>1</option><option>2</option></select>";
const selectElement = myElement.getElementsByTagName("select")[0];
selectElement.setAttribute("data-param1", "param1");
selectElement.setAttribute("data-param2", "param2");
Titulum
  • 9,928
  • 11
  • 41
  • 79
0

You could use indexOf and substr() to split it into 2 parts, insert your new text, and put it back together again.

var first_half = select_string.substr(0, select_string.indexOf('>'));

var second_half = select_string.substr(select_string.indexOf('>'));

select_string = first_half + ' data-param1=\"param1\" data-param2=\"param2\" ' + second_half;
agentile1990
  • 16
  • 1
  • 3