CODEWITHSUNDEEP
javascripthtml-select
Mina Magdy
Mina Magdy

Reputation: 141

js wrong string output

I need to get correct valeu from this string, what I done wrong ?

var i = 0;
var ret = '<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option>';
var pre = ret + '<option value="0">NON</option>';
var count = $($.parseHTML(pre)).filter('option').length;
console.log(pre);

for(i=0; i < count; i++){
    var val_drop = $($.parseHTML(pre)).filter("option[value*='" + i + "']").val();
    var text_drop = $($.parseHTML(pre)).filter("option[value*='" + i + "']").text();
    console.log(val_drop);
}

the output is :

<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option><option value="0">NON</option>
20
19
20

but the correct output should be:

19
20
0

Upvotes: 1

Views: 185

Answers (4)

Lo&#239;c Faure-Lacroix
Lo&#239;c Faure-Lacroix

Reputation: 13600

First add elements option to a select`.

var ret = '<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option>';
var options = ret + '<option value="0">MON</option>';

var elem_txt = '<select>' + options + '</select>'
// Get a DOM object
var elem = $.parseHTML(elem_txt)
var options = elem.find('option')

// for loop
for(var i=0; i<options.length; i++) {
   console.log($(options[0]).val());
}

//jQuery each
options.each(function () {
   console.log($(this).val());
})

You don't have to recreate DOM objects everytime using parseHTML.

In your test, the matching of [value*=...] seems to be matching the index as a string so you have:

this:

  • index: 0 -> 20 (0 is present)
  • index: 1 -> 19 (1 is present)
  • index: 2 -> 20 (2 is present)

I'm pretty sure that if you do from 0 to 3, you'll have problems with the 3 as nothing will match the css rule.

Upvotes: 0

Kirill kilo-code Babkin
Kirill kilo-code Babkin

Reputation: 356

i did it with split(); see if it helps. 

<script>
var i = 0;
var ret = '<option value="19">Dep_01_01</option><option               value="20">Dep_01_02</option>';
var pre = ret + '<option value="0">MON</option>';
var count = $($.parseHTML(pre)).filter('option').length;
console.log(count);
console.log(pre)
for(i=0; i < count+1; i++){
var val_drop = pre.split('<option value="');
val_drop = val_drop[i].split('"')[0];
console.log(val_drop);
}
</script>

Upvotes: 0

Hackerman
Hackerman

Reputation: 12305

Same approach:

var i = 0;
var ret = '<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option>';
var pre = ret + '<option value="0">NON</option>';
var count = $($.parseHTML(pre)).filter('option').length;

$.each($.parseHTML(pre),function(i,item){
   console.log($(item).val());
});

Working fiddle: https://jsfiddle.net/vhapd1un/

Upvotes: 1

Vanojx1
Vanojx1

Reputation: 5574

You dont need any function to do that

var ret = '<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option>';
var pre = ret + '<option value="0">NON</option>';

$(pre).each(function(){
  $('#result').append($(this).val()+" <-----> "+$(this).html()+"<br>");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="result">

Upvotes: 2

Related Questions