How to insert a var inside JS

Question

I want to insert the var "id" where "SP" is located. Is it possible?

var id = $(this).val();
    $("#select2").children("option[value^='SP_']").show();

The whole code above:

(I'm trying to do this because I'll add another select (#select3) that will need the _1, _2, _3 filter that I'm using on option values.)

<select name="select1" id="select1">
  <option value="vazio">Selecione um Estado</option>
  <option value="SP">São Paulo</option>
  <option value="PE">Pernambuco</option>
  <option value="GO">Goiás</option>
  <option value="BA">Bahia</option>
</select>

<select name="select2" id="select2">
  <option value="vazio">Selecione uma Cidade</option>
  <option value="SP_1">Cidade São Paulo</option>
  <option value="SP_2">Cidade São Paulo</option>
  <option value="SP_3">Cidade São Paulo</option>
  <option value="PE_1">Cidade Pernambuco</option>
  <option value="PE_2">Cidade Pernambuco</option>
  <option value="PE_3">Cidade Pernambuco</option>
  <option value="GO_1">Cidade Goiás</option>
  <option value="GO_2">Cidade Goiás</option>
  <option value="BA_1">Cidade Bahia<option>
</select>

<script>
$(document).ready(function() {
    $("#select2").children("option").hide();
});
$("#select1").change(function() {
    var id = $(this).val();
    $("#select2").children("option").hide();
    $("#select2").children("option[value^='SP_']").show();
});
</script>

Are you asking if this is at all possible or how to do this safely (ie, not to confuse the selector)? — Xeren Narcy, Jul 15 '16 at 04:08
I'll add more of my code so you can understand what I'm trying to do. If you have a better solution, so I don't need to confuse the selector, please share with me. — André Martins, Jul 15 '16 at 04:11
It's a basic string concatenation. `"option[value^='" + id + "_']"` — nnnnnn, Jul 15 '16 at 04:14
I feel stupid right now. I'm still learning, haha. Anyway, thanks! — André Martins, Jul 15 '16 at 04:16
@nnnnnn what if the value matches `/['\[\]]/` or other "bad" characters? — Xeren Narcy, Jul 15 '16 at 04:17
@XerenNarcy - It won't. The value is coming from the options in a select element. — nnnnnn, Jul 15 '16 at 04:18
@nnnnnn but you don't know that :) it's just what's shown here and it could be a simplified case. — Xeren Narcy, Jul 15 '16 at 04:19
@AndréMartins it may be tedious and repetitive but if it works - use a separate ` — Xeren Narcy, Jul 15 '16 at 04:26
Check the answers to the question I linked to above for several different approaches. — nnnnnn, Jul 15 '16 at 04:43

score 0 · Answer 1 · answered Jul 15 '16 at 04:18

0

See if it works

Plunker

<!DOCTYPE html>
<html>
<body>
  <select id='mySelectBox'>
    <option value='SP_1'>test Val</option>
    <option value='UG_1'>test Val</option>
    <option value='SP_2'>test Val</option>
    <option value='UG_1'>test Val</option>
    <option value='SP_3'>test Val</option>
  </select>
<script>
  var myOpts = document.getElementById('mySelectBox').options;
  for(var i=0; i<myOpts.length; i++) {
    if(myOpts[i].value.indexOf('SP') > -1)
        myOpts[i].setAttribute('id', 'myId_' + i);
  }
</script>
</body>

</html>

Result

<select id="mySelectBox">
    <option value="SP_1" id="myId_0">test Val</option>
    <option value="UG_1">test Val</option>
    <option value="SP_2" id="myId_2">test Val</option>
    <option value="UG_1">test Val</option>
    <option value="SP_3" id="myId_4">test Val</option>
</select>

answered Jul 15 '16 at 04:18

Raman Sahasi

30,180
9
58
71

When I wrote this code, only top three lines of this question were written and the question was `I want to insert the var "id" where "SP" is located. Is it possible?`. So it's all according to that.:) http://www.stackoverflow.com/posts/38387702/revisions#rev15da5f7d-0a2c-41c6-a64e-9c8c27adc24b – Raman Sahasi Jul 15 '16 at 04:30
As you said in your comment, it was quite simple string concatenation. So I guess I mis-interpreted the question :) – Raman Sahasi Jul 15 '16 at 05:03
Oh well. We've all done that. I'll remove my other comments now that you've seen them. – nnnnnn Jul 15 '16 at 05:34

score 0 · Answer 2 · answered Jul 15 '16 at 04:44

Try it :

<script>
           $(document).ready(function() {
            $("<select id='select3'><option></option></select>").appendTo("body");
               var id = 1;
               $("#select3").children().attr({id:"SP_" + id}).text("SP_" + id);

           });
</script>

How to insert a var inside JS

2 Answers2