1

I am pre-selecting the most commonly chosen options for apx. 300 Select elements, and would like to differentiate between when those values are still in their initial pre-selected/default state vs. when a user has actively chosen that value by clicking on the form element (indicating that they made an active decision to leave it set to that value).

In order to do that I am creating a pair of options for each value that is being pre-selected (with slightly different values i.e.value="50" vs. value="50_Default"), and when the element is clicked I want to hide the pre-selected option and show the regular one. I'd like to use classes as selectors so that the function will work for all of the Select elements, regardless of their values.

I'm having trouble adapting jQuery's show/hide method to this scenario, and/or modifying the answers I've seen for similar questions on SO postings which require specifying each of the options in the function (i.e jQuery disable SELECT options based on Radio selected (Need support for all browsers). I did find one solution which shows/hide Select options by class, but the code is a bit too complex for me to adapt on my own so I would appreciate help modifying it if that's the best approach https://stackoverflow.com/a/5924965/1056713

I'm trying to do something along these lines (Neither of these functions are working)

JS

$(".default_set").click(function(){
    $(this).children("select option .default_field").hide();
    $(this).children("select option .selected_field").show();
});

// Store the hidden options (necessary in IE)
$(".hidden_field").hide();
$(this).parent("select option .default_field").removeAttr("selected");
$(this).parent("select option .default_field").hide();
$(this).parent("select option .selected_field").show();

HTML

<select name=min_jeans class="default_set">
    <option value=0>$0</option>
    <option value="50_Default" class="default_field" selected=selected>$50</option>
    <option value="50" class="selected_field" style="display:none">$50</option>
    <option value=100>$100</option>
    <option value=150>$150</option>
    <option class="hidden_field" value="hidden_field" style="display:none;"></option>    
</select>

This is the closest I've gotten (with the help of @kasdega) http://jsfiddle.net/chayacooper/VN2Su/13/, using values instead of classes. It's also not working quite right - The fiddle doesn't display the default value before the element is clicked, and when I run the code on my computer I have the opposite issue - it displays the default value before the element is clicked, but doesn't hide it when it should.

aynber
  • 22,380
  • 8
  • 50
  • 63
Chaya Cooper
  • 2,566
  • 2
  • 38
  • 67
  • I don't understand your implementation. Why not disable the ` – Terry Mar 08 '13 at 20:10
  • I want this to be seamless to the user. From their perspective they don't see a difference between the values, but it will allow me to assign different weights to values, etc. – Chaya Cooper Mar 08 '13 at 20:18

3 Answers3

3

I wouldn't use hide/show. I would just manipulate the element

$('select').focus(function() {
    var option = $(this).find("option[value*=Default]");
    option.attr('value', option.attr('value').match(/[0-9]+/));
});

http://jsfiddle.net/JHAPp/2/

Use focus to detect the user has interacted with the select. When that happens, remove the _Default part from the value (it's actually just matching digits).

Submitting the form without touching anything returns 50_Default. After touching the select, it will return 50

Steve Robbins
  • 13,672
  • 12
  • 76
  • 124
  • I always love discovering a different approach to a problem :-) Will this work with all the values, regardless of their lengths/position of '_Default'? Also I'm assuming it removes the selected=selected from the option if another option is selected? – Chaya Cooper Mar 08 '13 at 20:33
  • This might also be helpful for me to use when I want to change the formatting to draw their attention to unanswered questions :-) – Chaya Cooper Mar 08 '13 at 20:56
  • 1
    You don't need to manipulate the selected prop like that. Instead use `$('select').val(200)` to pick the option with that value. What this does is look for `Default` anywhere in the value of the options. Then it looks for numbers only and reassigns the value. You could use `.replace('_Default', '')` alternatively for other values. – Steve Robbins Mar 08 '13 at 22:17
  • It looks like it works perfectly when I submit it in php, I was just confused because it doesn't change in the html source :-) I'm not familiar with what "*=" or "/[0-9]+/" means. Would you mind explaining those so that I'll understand how to modify things as the code evolves? I tried to google them (in conjunction with match, etc.) but it can be hard to find answers about specific characters – Chaya Cooper Mar 08 '13 at 23:29
  • 1
    See http://api.jquery.com/attribute-contains-selector/ and the other is just a regular expression https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions – Steve Robbins Mar 11 '13 at 17:11
  • When I started integrating this into the other elements I realized that this script is replacing the '_Default' values with the text, so I changed it to 'Replace' in order to just remove the word '_Default' from the value. Is there a functional difference between using 'Match' vs. 'Replace', or just personal preference? – Chaya Cooper Mar 12 '13 at 19:33
1

The following will show the default option in the select and then hide it when the item is clicked and select it's associated value.

$(".default_set").focus(function () {
    $(".default_field").hide();
    if ($(".default_field").is(":selected")) {
        $(".selected_field").show().prop("selected", true);
    }
});

DEMO

Ruben Infante
  • 3,125
  • 1
  • 17
  • 16
  • That's what I was looking for :-D One question - I'm assuming from your code that it's changing selected=selected from ".default_field" to ".selected_field", but it's still showing value="50_Default" in the Select box once it hides it in the options – Chaya Cooper Mar 08 '13 at 20:27
  • @ChayaCooper I updated my answer to use `.focus()` instead of `.click()`, which resolved that issue. – Ruben Infante Mar 08 '13 at 20:36
  • It still seems to be an issue in the fiddle :-( If you click on the new value it changes, but if you don't actually click on $50 it's leaving the ".default_field" (I checked the handy alert button you added ;-) ) – Chaya Cooper Mar 08 '13 at 20:40
  • @ChayaCooper You are correct. I originally tested in Chrome, but the behavior of hiding options and setting them as selected while open seems to work differently in both Firefox and IE. I would recommend going with the answer provided by Steve Robbins if it satisfies your overall intent as it avoids dealing with option hiding. – Ruben Infante Mar 08 '13 at 20:59
  • I read up on this a bit and it seems that the way to get it to work cross-browsers is to add one extra hidden option, and to store the hidden option there. I'd love to get this to work with show/hide since I don't quite understand the method that Steve used (which always complicates things later) – Chaya Cooper Mar 08 '13 at 21:18
0

I would write smth like this:

$(".default_set").focus(function () {
if ($('.default_field:selected')) {
    $('.default_field').hide();
    $('.selected_field').show();
    $('.default_field').removeAttr('selected');
}
});

Hope this works and helps you

cosmin.danisor
  • 943
  • 1
  • 12
  • 29