how to make dynamic option label html

Aye sir, i want to make option like "916812 - Kurt Cobain", and when i click it shown only "916812" and i have done with that..

but when i want to reselect the option "916812" to others it didnt change back to "916812 - Kurt Cobain". How to solve this? here is my code :

HTML :

<body>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812">916812 - Kurt Cobain</option>

<option value="918291">918291 - Freddi Mercury</option>

<option value="912728">912728 - Gerry Cherone</option>

<option value="991829">991829 - Axl Rose</option>

<option value="927182">927182 - Steven Tyler</option>

<option value="912728">912739 - Russel Hitchcock</option>

</select>

</body>

Jquery :

  $("#anggota_nis").on('change', function(){

      var nis = $("#anggota_nis").val();

      $("#anggota_nis option[value="+nis+"]").text(nis);      

  })

jsfiddle :
http://jsfiddle.net/he7Laytg

here's the form i created

So, basically i want to make user feel helpfully because when searching "student name" is based on "NIS" which is only number value from option.

I think its kinda hard searching the "student name" only with the "ID" so i put "student name" with it.

edited Nov 20 at 23:37

asked Nov 20 at 23:21

Noval Dwi Putra

Before you change the text, set a data() field to it's old value. When you change it, find all the elements with that data field, and restore them. But, also at the same time, why do you want to do this? This is a very strange user interface...
– Taplar
Nov 20 at 23:25

@Taplar so its not good for user interface? because i think its helpfully for user than only showing the value like "916812" and when user choose the name "Kurt Cobain" showing in the new input text
– Noval Dwi Putra
Nov 20 at 23:32

The question doesn't show the "Kurt Cobain" showing in the new input text part, so all I see is you removing part of their select. Even if you show it in another field, your changing the data out from under the user, which is weird. However, that's my personal opinion. You can do what you want with the first part of my suggestion.
– Taplar
Nov 20 at 23:34

ok @Taplar thanks for suggestion.. i will try that, sorry if my english messed up but i need to try for solving my problem :-)
– Noval Dwi Putra
Nov 20 at 23:39

fyi, i edited my question for more reason to do this
– Noval Dwi Putra
Nov 20 at 23:40

add a comment |

HTML :

<body>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812">916812 - Kurt Cobain</option>

<option value="918291">918291 - Freddi Mercury</option>

<option value="912728">912728 - Gerry Cherone</option>

<option value="991829">991829 - Axl Rose</option>

<option value="927182">927182 - Steven Tyler</option>

<option value="912728">912739 - Russel Hitchcock</option>

</select>

</body>

Jquery :

  $("#anggota_nis").on('change', function(){

      var nis = $("#anggota_nis").val();

      $("#anggota_nis option[value="+nis+"]").text(nis);      

  })

jsfiddle :
http://jsfiddle.net/he7Laytg

here's the form i created

So, basically i want to make user feel helpfully because when searching "student name" is based on "NIS" which is only number value from option.

I think its kinda hard searching the "student name" only with the "ID" so i put "student name" with it.

edited Nov 20 at 23:37

asked Nov 20 at 23:21

Noval Dwi Putra

Before you change the text, set a data() field to it's old value. When you change it, find all the elements with that data field, and restore them. But, also at the same time, why do you want to do this? This is a very strange user interface...
– Taplar
Nov 20 at 23:25

@Taplar so its not good for user interface? because i think its helpfully for user than only showing the value like "916812" and when user choose the name "Kurt Cobain" showing in the new input text
– Noval Dwi Putra
Nov 20 at 23:32

The question doesn't show the "Kurt Cobain" showing in the new input text part, so all I see is you removing part of their select. Even if you show it in another field, your changing the data out from under the user, which is weird. However, that's my personal opinion. You can do what you want with the first part of my suggestion.
– Taplar
Nov 20 at 23:34

ok @Taplar thanks for suggestion.. i will try that, sorry if my english messed up but i need to try for solving my problem :-)
– Noval Dwi Putra
Nov 20 at 23:39

fyi, i edited my question for more reason to do this
– Noval Dwi Putra
Nov 20 at 23:40

add a comment |

HTML :

<body>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812">916812 - Kurt Cobain</option>

<option value="918291">918291 - Freddi Mercury</option>

<option value="912728">912728 - Gerry Cherone</option>

<option value="991829">991829 - Axl Rose</option>

<option value="927182">927182 - Steven Tyler</option>

<option value="912728">912739 - Russel Hitchcock</option>

</select>

</body>

Jquery :

  $("#anggota_nis").on('change', function(){

      var nis = $("#anggota_nis").val();

      $("#anggota_nis option[value="+nis+"]").text(nis);      

  })

jsfiddle :
http://jsfiddle.net/he7Laytg

here's the form i created

So, basically i want to make user feel helpfully because when searching "student name" is based on "NIS" which is only number value from option.

I think its kinda hard searching the "student name" only with the "ID" so i put "student name" with it.

edited Nov 20 at 23:37

asked Nov 20 at 23:21

Noval Dwi Putra

HTML :

<body>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812">916812 - Kurt Cobain</option>

<option value="918291">918291 - Freddi Mercury</option>

<option value="912728">912728 - Gerry Cherone</option>

<option value="991829">991829 - Axl Rose</option>

<option value="927182">927182 - Steven Tyler</option>

<option value="912728">912739 - Russel Hitchcock</option>

</select>

</body>

Jquery :

  $("#anggota_nis").on('change', function(){

      var nis = $("#anggota_nis").val();

      $("#anggota_nis option[value="+nis+"]").text(nis);      

  })

jsfiddle :
http://jsfiddle.net/he7Laytg

here's the form i created

So, basically i want to make user feel helpfully because when searching "student name" is based on "NIS" which is only number value from option.

I think its kinda hard searching the "student name" only with the "ID" so i put "student name" with it.

jquery html

edited Nov 20 at 23:37

asked Nov 20 at 23:21

Noval Dwi Putra

edited Nov 20 at 23:37

asked Nov 20 at 23:21

Noval Dwi Putra

edited Nov 20 at 23:37

asked Nov 20 at 23:21

Noval Dwi Putra

asked Nov 20 at 23:21

Noval Dwi Putra

asked Nov 20 at 23:21

Noval Dwi Putra

Before you change the text, set a data() field to it's old value. When you change it, find all the elements with that data field, and restore them. But, also at the same time, why do you want to do this? This is a very strange user interface...
– Taplar
Nov 20 at 23:25

@Taplar so its not good for user interface? because i think its helpfully for user than only showing the value like "916812" and when user choose the name "Kurt Cobain" showing in the new input text
– Noval Dwi Putra
Nov 20 at 23:32

The question doesn't show the "Kurt Cobain" showing in the new input text part, so all I see is you removing part of their select. Even if you show it in another field, your changing the data out from under the user, which is weird. However, that's my personal opinion. You can do what you want with the first part of my suggestion.
– Taplar
Nov 20 at 23:34

ok @Taplar thanks for suggestion.. i will try that, sorry if my english messed up but i need to try for solving my problem :-)
– Noval Dwi Putra
Nov 20 at 23:39

fyi, i edited my question for more reason to do this
– Noval Dwi Putra
Nov 20 at 23:40

add a comment |

Before you change the text, set a data() field to it's old value. When you change it, find all the elements with that data field, and restore them. But, also at the same time, why do you want to do this? This is a very strange user interface...
– Taplar
Nov 20 at 23:25

@Taplar so its not good for user interface? because i think its helpfully for user than only showing the value like "916812" and when user choose the name "Kurt Cobain" showing in the new input text
– Noval Dwi Putra
Nov 20 at 23:32

The question doesn't show the "Kurt Cobain" showing in the new input text part, so all I see is you removing part of their select. Even if you show it in another field, your changing the data out from under the user, which is weird. However, that's my personal opinion. You can do what you want with the first part of my suggestion.
– Taplar
Nov 20 at 23:34

ok @Taplar thanks for suggestion.. i will try that, sorry if my english messed up but i need to try for solving my problem :-)
– Noval Dwi Putra
Nov 20 at 23:39

fyi, i edited my question for more reason to do this
– Noval Dwi Putra
Nov 20 at 23:40

Before you change the text, set a data() field to it's old value. When you change it, find all the elements with that data field, and restore them. But, also at the same time, why do you want to do this? This is a very strange user interface...
– Taplar
Nov 20 at 23:25

@Taplar so its not good for user interface? because i think its helpfully for user than only showing the value like "916812" and when user choose the name "Kurt Cobain" showing in the new input text
– Noval Dwi Putra
Nov 20 at 23:32

The question doesn't show the "Kurt Cobain" showing in the new input text part, so all I see is you removing part of their select. Even if you show it in another field, your changing the data out from under the user, which is weird. However, that's my personal opinion. You can do what you want with the first part of my suggestion.
– Taplar
Nov 20 at 23:34

ok @Taplar thanks for suggestion.. i will try that, sorry if my english messed up but i need to try for solving my problem :-)
– Noval Dwi Putra
Nov 20 at 23:39

fyi, i edited my question for more reason to do this
– Noval Dwi Putra
Nov 20 at 23:40

add a comment |

1 Answer
1

active

oldest

votes

//take note of the data-name attributes added to the options

//bind a change event listener to the select

var $anggotaNis = $('#anggota_nis').on('change', function(){

  $anggotaNis.find('.changed') //find the previously changed option

    .removeClass('changed') //remove the class, as we are reverting them

    .text(function(){ //set the text back, based on the value and name

      return this.value +' - '+ this.getAttribute('data-name');

    });

  

  $anggotaNis.find(':selected') //find the option just selected

    .addClass('changed') //add the class to mark that we are changing it

    .text(function(){ //set the text to just the value

      return this.value;

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812" data-name="Kurt Cobain">916812 - Kurt Cobain</option>

<option value="918291" data-name="Freddi Mercury">918291 - Freddi Mercury</option>

<option value="912728" data-name="Gerry Cherone">912728 - Gerry Cherone</option>

<option value="991829" data-name="Axl Rose">991829 - Axl Rose</option>

<option value="927182" data-name="Steven Tyler">927182 - Steven Tyler</option>

<option value="912728" data-name="Russel Hitchcock">912739 - Russel Hitchcock</option>

</select>

answered Nov 20 at 23:44

Taplar

15.3k21529

wow sir, thats awesome like i want to do.. thank you very much im so helped sir :-)
– Noval Dwi Putra
Nov 20 at 23:53

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403101%2fhow-to-make-dynamic-option-label-html%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

//take note of the data-name attributes added to the options

//bind a change event listener to the select

var $anggotaNis = $('#anggota_nis').on('change', function(){

  $anggotaNis.find('.changed') //find the previously changed option

    .removeClass('changed') //remove the class, as we are reverting them

    .text(function(){ //set the text back, based on the value and name

      return this.value +' - '+ this.getAttribute('data-name');

    });

  

  $anggotaNis.find(':selected') //find the option just selected

    .addClass('changed') //add the class to mark that we are changing it

    .text(function(){ //set the text to just the value

      return this.value;

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812" data-name="Kurt Cobain">916812 - Kurt Cobain</option>

<option value="918291" data-name="Freddi Mercury">918291 - Freddi Mercury</option>

<option value="912728" data-name="Gerry Cherone">912728 - Gerry Cherone</option>

<option value="991829" data-name="Axl Rose">991829 - Axl Rose</option>

<option value="927182" data-name="Steven Tyler">927182 - Steven Tyler</option>

<option value="912728" data-name="Russel Hitchcock">912739 - Russel Hitchcock</option>

</select>

answered Nov 20 at 23:44

Taplar

15.3k21529

wow sir, thats awesome like i want to do.. thank you very much im so helped sir :-)
– Noval Dwi Putra
Nov 20 at 23:53

add a comment |

//take note of the data-name attributes added to the options

//bind a change event listener to the select

var $anggotaNis = $('#anggota_nis').on('change', function(){

  $anggotaNis.find('.changed') //find the previously changed option

    .removeClass('changed') //remove the class, as we are reverting them

    .text(function(){ //set the text back, based on the value and name

      return this.value +' - '+ this.getAttribute('data-name');

    });

  

  $anggotaNis.find(':selected') //find the option just selected

    .addClass('changed') //add the class to mark that we are changing it

    .text(function(){ //set the text to just the value

      return this.value;

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812" data-name="Kurt Cobain">916812 - Kurt Cobain</option>

<option value="918291" data-name="Freddi Mercury">918291 - Freddi Mercury</option>

<option value="912728" data-name="Gerry Cherone">912728 - Gerry Cherone</option>

<option value="991829" data-name="Axl Rose">991829 - Axl Rose</option>

<option value="927182" data-name="Steven Tyler">927182 - Steven Tyler</option>

<option value="912728" data-name="Russel Hitchcock">912739 - Russel Hitchcock</option>

</select>

answered Nov 20 at 23:44

Taplar

15.3k21529

wow sir, thats awesome like i want to do.. thank you very much im so helped sir :-)
– Noval Dwi Putra
Nov 20 at 23:53

add a comment |

//take note of the data-name attributes added to the options

//bind a change event listener to the select

var $anggotaNis = $('#anggota_nis').on('change', function(){

  $anggotaNis.find('.changed') //find the previously changed option

    .removeClass('changed') //remove the class, as we are reverting them

    .text(function(){ //set the text back, based on the value and name

      return this.value +' - '+ this.getAttribute('data-name');

    });

  

  $anggotaNis.find(':selected') //find the option just selected

    .addClass('changed') //add the class to mark that we are changing it

    .text(function(){ //set the text to just the value

      return this.value;

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812" data-name="Kurt Cobain">916812 - Kurt Cobain</option>

<option value="918291" data-name="Freddi Mercury">918291 - Freddi Mercury</option>

<option value="912728" data-name="Gerry Cherone">912728 - Gerry Cherone</option>

<option value="991829" data-name="Axl Rose">991829 - Axl Rose</option>

<option value="927182" data-name="Steven Tyler">927182 - Steven Tyler</option>

<option value="912728" data-name="Russel Hitchcock">912739 - Russel Hitchcock</option>

</select>

answered Nov 20 at 23:44

Taplar

15.3k21529

//take note of the data-name attributes added to the options

//bind a change event listener to the select

var $anggotaNis = $('#anggota_nis').on('change', function(){

  $anggotaNis.find('.changed') //find the previously changed option

    .removeClass('changed') //remove the class, as we are reverting them

    .text(function(){ //set the text back, based on the value and name

      return this.value +' - '+ this.getAttribute('data-name');

    });

  

  $anggotaNis.find(':selected') //find the option just selected

    .addClass('changed') //add the class to mark that we are changing it

    .text(function(){ //set the text to just the value

      return this.value;

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812" data-name="Kurt Cobain">916812 - Kurt Cobain</option>

<option value="918291" data-name="Freddi Mercury">918291 - Freddi Mercury</option>

<option value="912728" data-name="Gerry Cherone">912728 - Gerry Cherone</option>

<option value="991829" data-name="Axl Rose">991829 - Axl Rose</option>

<option value="927182" data-name="Steven Tyler">927182 - Steven Tyler</option>

<option value="912728" data-name="Russel Hitchcock">912739 - Russel Hitchcock</option>

</select>

//take note of the data-name attributes added to the options

//bind a change event listener to the select

var $anggotaNis = $('#anggota_nis').on('change', function(){

  $anggotaNis.find('.changed') //find the previously changed option

    .removeClass('changed') //remove the class, as we are reverting them

    .text(function(){ //set the text back, based on the value and name

      return this.value +' - '+ this.getAttribute('data-name');

    });

  

  $anggotaNis.find(':selected') //find the option just selected

    .addClass('changed') //add the class to mark that we are changing it

    .text(function(){ //set the text to just the value

      return this.value;

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812" data-name="Kurt Cobain">916812 - Kurt Cobain</option>

<option value="918291" data-name="Freddi Mercury">918291 - Freddi Mercury</option>

<option value="912728" data-name="Gerry Cherone">912728 - Gerry Cherone</option>

<option value="991829" data-name="Axl Rose">991829 - Axl Rose</option>

<option value="927182" data-name="Steven Tyler">927182 - Steven Tyler</option>

<option value="912728" data-name="Russel Hitchcock">912739 - Russel Hitchcock</option>

</select>

//take note of the data-name attributes added to the options

//bind a change event listener to the select

var $anggotaNis = $('#anggota_nis').on('change', function(){

  $anggotaNis.find('.changed') //find the previously changed option

    .removeClass('changed') //remove the class, as we are reverting them

    .text(function(){ //set the text back, based on the value and name

      return this.value +' - '+ this.getAttribute('data-name');

    });

  

  $anggotaNis.find(':selected') //find the option just selected

    .addClass('changed') //add the class to mark that we are changing it

    .text(function(){ //set the text to just the value

      return this.value;

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="anggota_nis" id="anggota_nis">

<option hidden selected value=""></option>

<option value="916812" data-name="Kurt Cobain">916812 - Kurt Cobain</option>

<option value="918291" data-name="Freddi Mercury">918291 - Freddi Mercury</option>

<option value="912728" data-name="Gerry Cherone">912728 - Gerry Cherone</option>

<option value="991829" data-name="Axl Rose">991829 - Axl Rose</option>

<option value="927182" data-name="Steven Tyler">927182 - Steven Tyler</option>

<option value="912728" data-name="Russel Hitchcock">912739 - Russel Hitchcock</option>

</select>

answered Nov 20 at 23:44

Taplar

15.3k21529

answered Nov 20 at 23:44

Taplar

15.3k21529

answered Nov 20 at 23:44

Taplar

15.3k21529

answered Nov 20 at 23:44

Taplar

15.3k21529

wow sir, thats awesome like i want to do.. thank you very much im so helped sir :-)
– Noval Dwi Putra
Nov 20 at 23:53

add a comment |

wow sir, thats awesome like i want to do.. thank you very much im so helped sir :-)
– Noval Dwi Putra
Nov 20 at 23:53

wow sir, thats awesome like i want to do.. thank you very much im so helped sir :-)
– Noval Dwi Putra
Nov 20 at 23:53

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg