1

My problem is pretty much syntax related, I'm sure.

I have a page, on which there are tags (buttons). The user should be able to click on one of those tags to edit it's name.

Also on that same page, I have a select list in which I keep track of all the changes. My problem arises when I click the tag button, and the corresponding option in the list should be selected dynamically. I tried several things, here's my latest attempt:

HTML

       <!-- tags container -->
        <div class="container_12">
            <div class="grid_2"><img src="images/spacer.png" /></div>
            <div id="content" class="grid_8">
                <button name="PHP" class="tag-button" onclick="edit(this)">PHP</button>
            </div>
            <div class="grid_2"><img src="images/spacer.png" /></div>
        </div>
        <!-- tags container end -->

        <!-- action buttons container -->
        <div class="container_12 action-bar">
            <div class="grid_4"><img src="images/spacer.png" /></div>
            <div id="action-add">
                <input type="text" name="newTag" id="newTag" />
                <input type="button" id="add" value="Add tag" />
            </div>
            <div class="grid_4"><img src="images/spacer.png" /></div>
            <div id="action-edit">
                <input type="text" name="editTag" id="editTag" />
                <input type="button" id="update" value="Update tag" />
            </div>
         <!-- action buttons container end -->
        </div>

        <!-- Real Time list container -->
        <div class="container_12">
            <div class="grid_4"><img src="images/spacer.png" /></div>
            <select id="insertString" multiple>
                <option value="0">PHP</option>
            </select>
        </div>
        <!-- real time list container end -->

Javascript/jquery:

    //function edit: places the tag button info in textbox
    function edit(element)
    {
            var name = $(element).attr('name');
            //add the tag name to the editTag textbox
            $('#editTag').val(name);
            //find in the list the corresponding option, and select it
            $('#insertString').find('option: contains("' + name + '")').attr("selected", true);
     }

The portion of code I'm concerned with right now, is the "find in the list the corresponding option, and select it." I can't seem to make it select the option at all.

Any help would be appreciated.

wribit
  • 605
  • 1
  • 6
  • 18

4 Answers4

1
var previous = "Gateway 1", edited = "world";
$('#insertString option:contains("' + previous +'")').text(edited);
$('#insertString option:contains("'+ edited + '")').attr('selected', true);

JSFiddle

Triode
  • 11,309
  • 2
  • 38
  • 48
  • It still isn't getting selected, after changing my code to this - sorry. I even had tried this before... to no avail – wribit Feb 13 '14 at 18:13
  • I don't understand... your fiddle works fine, but when I try it on my end - it just doesn't. would it be because my select is multiple? – wribit Feb 13 '14 at 18:17
  • No that wont effect. Because I tried duplicating the values – Triode Feb 13 '14 at 18:19
  • I could try using a normal select - but I would prefer keeping it as a multiple if it's possible – wribit Feb 13 '14 at 18:19
  • are you trying to change the value of options ? and then making it selected – Triode Feb 13 '14 at 18:22
  • what I'd like is to be able to: 1) select the item in the list, to keep track of the tag being edited. 2) once edited, the item in the list itself will be updated with the new name. – wribit Feb 13 '14 at 18:23
  • I just tried changing my select to a normal one, and it still won't get selected... I'm in a twilight zone episode, I'm sure – wribit Feb 13 '14 at 18:28
  • I've just tried this but I run into an issue with timing. Your code supposes that I would already have the edited value when the user clicks edit - but I do not. I only get that value once the user clicks update... which is the next step. The update step I feel I could make work, as I've done this before - it's only the handling of the list I'm having issues with – wribit Feb 13 '14 at 18:46
  • can u show me how the UI looks like, things look messy with out seeing any thing – Triode Feb 13 '14 at 18:48
  • I'm making a fiddle... it's my first time playing around with jsfiddle so bear with me :) – wribit Feb 13 '14 at 18:54
  • where is the fiddle ? – Triode Feb 13 '14 at 18:57
0
//function edit: places the tag button info in textbox
    function edit(element)
    {
            var name = $(element).attr('name');
            //add the tag name to the editTag textbox
            $('#editTag').val(name);
            //find in the list the corresponding option, and select it
            $('#insertString').val('"+name+"');
     }
Vinay Pratap Singh Bhadauria
  • 9,829
  • 3
  • 28
  • 49
0

I suggest the following:

$('#insertString').find('option:contains("'+ name + '")').attr("selected", true);
cereallarceny
  • 4,913
  • 4
  • 39
  • 74
Anonymous
  • 1
  • this is the very first thing I tried, but I think the fact my select is a multiple select is the reason why it fails. Any idea how to make this work with a multiple select would be great – wribit Feb 13 '14 at 18:21
0

$("#insertString option[value='" + name "']").prop('selected', true);
lshettyl
  • 8,166
  • 4
  • 25
  • 31
  • I have a feeling the fact my select is a multiple select box, is the reason these answers aren't working - any idea how to make this work with a multiple select? – wribit Feb 13 '14 at 18:20